CSS滚动条宽度

Question

CSS滚动条宽度

伙计们,是否可以增加<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
}?

Run Code Online (Sandbox Code Playgroud)

JSFiddle演示

参考文献:

@Oliver 你永远猜不到发生了什么。 (12认同)
好吧,**Edge**是********基于WebKit**的浏览器. (3认同)

Answer 2

bob*_*nce 39

如果你在谈论自动出现在divwith overflow: scroll(或auto)上的滚动条,那么不,这仍然是浏览器使用普通操作系统小部件呈现的本机滚动条,而不是可以设置样式的内容(*).

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

(*:除了IE着色样式,我也不会真正推荐.除了仅限IE之外,使用它们迫使IE从使用当前Windows主题的漂亮滚动条图像回退到丑陋的旧Win95风格滚动条.)

您的答案不再受支持.截至2015年,Chrome和IE中存在多种滚动条样式 (4认同)

Answer 3

Cha*_*gwu 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>;
}

Run Code Online (Sandbox Code Playgroud)

Answer 4

Gui*_*lli 7

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

Run Code Online (Sandbox Code Playgroud)

请参阅jsfiddle.net中的 demo

不在Edge上,不在Firefox上 (5认同)

Answer 5

小智 6

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

归档时间：	14 年，10 月前
查看次数：	170114 次
最近记录：	5 年，9 月前