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

Question

是否可以增加放置在 内的

元素上滚动条的宽度？

我不是在谈论浏览器本身的默认滚动条，该页面以全屏模式运行，并且因为浏览器滚动条永远不会出现在图片中，所以内部

元素有自己的滚动条。

Answer 1

这可以在基于 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 演示

---

参考：

• 自定义滚动条网络工具包 | CSS-Tricks
• 来自 CSS-Tricks 的 WebKit 滚动条演示
• 15种不同的滚动条配置

Answer 2

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

虽然您可以按照 Matt 的建议将其替换为由可样式化的 div 和 JavaScript 组成的代理，但我不建议在一般情况下使用它。脚本驱动的滚动条的行为永远不会与真实操作系统滚动条完全相同，从而导致可用性和可访问性问题。

（*：除了 IE 着色样式，我也不推荐这种样式。除了仅适用于 IE 之外，使用它们还迫使 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

这设置了滚动条宽度：

::-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>;
}

Answer 5

是的。

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

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

Answer 6

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