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

【问题标题】：How can I increase a scrollbar's width using CSS?如何使用 CSS 增加滚动条的宽度？
【发布时间】：2011-05-02 11:30:30
【问题描述】：

是否可以增加位于<body> 内的<div> 元素的滚动条宽度？

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

【问题讨论】：

标签： html css scrollbar

【解决方案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

参考资料：

【讨论】：

自 2017 年 10 月 24 日起，这在 Edge 40.15063.674.0 中不起作用。咕噜。
嗯，Edge 不是基于 WebKit 的浏览器。
@Oliver 你永远猜不到发生了什么。
效果很好！
Firefox 使用：* { scrollbar-width: thin; }

【解决方案2】：

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

虽然您可以按照 Matt 的建议将其替换为由可样式化的 div 和 JavaScript 制成的代理，但我不建议将其用于一般情况。脚本驱动的滚动条与真正的 OS 滚动条的行为并不完全相同，这会导致可用性和可访问性问题。

(*: 除了 IE 着色样式，我也不太推荐。除了仅限 IE 之外，使用它们会迫使 IE 从当前 Windows 主题中使用漂亮的滚动条图像退回到丑陋的旧 Win95 - 样式的滚动条。）

【讨论】：

嗨 bobince，你是对的，它是一个溢出：滚动/自动滚动条。我确实尝试了 Matt 建议的 jScrollPane，但它大大降低了滚动性能。
不再支持您的回答。截至 2015 年，Chrome 和 IE 中存在多种设置滚动条样式的方法
@TomasM 你能提供例子或链接吗？

【解决方案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中的演示

【讨论】：

不在 Edge 上，不在 Firefox 上

【解决方案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>;
}

【讨论】：

【解决方案5】：

是的。

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

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

【讨论】：

嗨大卫，那么修改滚动条的过程是什么？我所知道的唯一用于样式的 CSS 标记仅与颜色有关。
#whateverElementyouAreFakingTheScrollbarWith { width: <length> }

【解决方案6】：

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

【讨论】：

webkit 现在允许::-webkit-scrollbar-[track|thumb|button|corner]