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

Posted 2023-02-21

技术标签:

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

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

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

【问题讨论】：

【参考方案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

参考资料：

Custom Scrollbars in WebKit | CSS-Tricks WebKit scrollbar demo from CSS-Tricks 15 Different scrollbar configurations

【讨论】：

自 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]

以上是关于如何使用 CSS 增加滚动条的宽度？的主要内容，如果未能解决你的问题，请参考以下文章

如何增加 WPF ScrollViewer 中的滚动条宽度？