如何使用CSS增加滚动条的宽度？

Question

如何使用CSS增加滚动条的宽度？

htmlcssscrollbar

75

在放置在<body>内的<div>元素上增加滚动条宽度是否可行？

我不是在谈论浏览器本身的默认滚动条，因为此页面以全屏模式运行，并且由于浏览器滚动条从未出现，所以内部<div>元素具有自己的滚动条。

- t0mcat

6个回答

41

如果您谈论的是使用overflow:scroll或auto属性并自动出现在

上的滚动条，则否，那仍然是浏览器使用常规 OS 小部件呈现的本机滚动条，并非可以样式化的内容(*).

虽然您可以像Matt建议的那样将其替换为由可样式化的div和JavaScript组成的代理，但我不建议在一般情况下这样做。脚本驱动的滚动条永远无法完全像真实的 OS 滚动条一样工作，从而导致可用性和可访问性问题。

(*: 除了IE颜色样式，但我也不太推荐。除了只能在IE中使用之外，使用它们还会迫使IE放弃使用当前 Windows 主题中漂亮的滚动条图像，转而使用丑陋的旧Win95风格的滚动条。)

- bobince

1

嗨，bobince，你是对的，这是一个overflow:scroll/auto滚动条。我确实尝试了Matt建议的jScrollPane，但它大幅降低了滚动性能。 - t0mcat

@TomasM，你能提供例子或链接吗？ - Charles Driver Jr.

19

您可以为div设置特定的工具栏

div::-webkit-scrollbar {
width: 12px;
}

div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}

请在jsfiddle.net中查看演示。

- Guillermo Nahuel Varelli

5

不在 Edge 上，也不在 Firefox 上。 - Mishax

9

这将设置滚动条的宽度：

::-webkit-scrollbar {
  width: 8px;   // for vertical scroll bar
  height: 8px;  // for horizontal scroll bar
}

// for Firefox add this class as well
.thin_scroll{
  scrollbar-width: thin; // auto | thin | none | <length>;
}

- Charles Okwuagwu

1

是的。

如果滚动条不是浏览器的滚动条，则它将由常规的HTML元素构建（可能是

和），因此可以进行样式化（或者如果是Flash、Java等环境，则可以根据这些环境自定义）。

具体情况取决于使用的DOM结构。

- Quentin

嗨，David，那么修改滚动条的过程是什么？我知道的唯一与样式相关的 CSS 标签仅涉及着色。 - t0mcat

1

#whateverElementyouAreFakingTheScrollbarWith { width: <length> } - Quentin

0

我尝试使用CSS修改滚动条的经验是不要这样做。只有IE浏览器可以实现。

- Jim Fell

1

现在，WebKit允许使用::-webkit-scrollbar-[track|thumb|button|corner]。 - Trevor

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- uınbɐɥs · Accepted Answer

这可以在基于WebKit的浏览器中实现（如Chrome和Safari），只需使用CSS：

::-webkit-scrollbar {
    width: 2em;
    height: 2em
}
::-webkit-scrollbar-button {
    background: #ccc
}
::-webkit-scrollbar-track-piece {
    background: #888
}
::-webkit-scrollbar-thumb {
    background: #eee
}

JSFiddle演示

参考文献：