Question

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

我不是在谈论浏览器本身的默认滚动条，这个页面以全屏模式运行，因为浏览器滚动条永远不会出现，内部<div>元素有它的自己的滚动条。

Answer 1

这可以在仅使用CSS的基于WebKit的浏览器（例如Chrome和Safari）中完成：

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

<强> JSFiddle Demo

<强>参考文献：

Answer 2

如果您正在谈论自动显示在div上overflow: scroll（或auto）的滚动条，那么不，这仍然是浏览器使用普通操作系统呈现的原生滚动条小部件，而不是可以设置样式的东西（*）。

虽然您可以使用由Matt建议的可设置的div和JavaScript制作的代理替换它，但我不建议将其用于一般情况。脚本驱动的滚动条从未与真实的操作系统滚动条完全相同，从而导致可用性和可访问性问题。

（*：除了IE着色样式，我也不会真正推荐。除了IE-only之外，使用它们迫使IE从使用当前Windows主题的漂亮滚动条图像回到丑陋的旧Win95风格的滚动条。）

Answer 3

您可以为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

中的演示

Answer 4

您可能对jScrollPane JQuery插件感兴趣，它似乎很容易使用 http://jscrollpane.kelvinluck.com/

Answer 5

这将设置滚动条宽度：

AffectsArrange

Answer 6

是

如果滚动条不是浏览器滚动条，那么它将由常规HTML元素（可能是div和span）构建，因此可以设置风格（或者是Flash，Java，等，可根据这些环境进行定制。）

细节取决于使用的DOM结构。

Answer 7

我尝试使用CSS修改滚动条的经验不是。只有IE才能让你这样做。

Answer 8

我不明白为什么每个人都对那些臃肿的jscrollpane如此满意，因为那里有更轻松的解决方案，使用滚轮时要快得多： http://baijs.com/tinyscrollbar/

CSS滚动条宽度

8 个答案: