Html CSS 滚动条宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4053220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Scrollbar width
提问by t0mcat
Folks, is it possible to increase the width of a scrollbar on a <div>element placed inside the <body>?
伙计们，是否可以增加<div>放置在<body>?
I am not talking about the default scrollbar on the browser itself, this page runs in full screen mode and because the browser scrollbar never comes into picture, the inner <div>element has its own scrollbar.
我不是在谈论浏览器本身的默认滚动条，这个页面以全屏模式运行，因为浏览器滚动条从不出现，内部<div>元素有自己的滚动条。
采纳答案by bobince
If you are talking about the scrollbar that automatically appears on a divwith overflow: scroll(or auto), then no, that's still a native scrollbar rendered by the browser using normal OS widgets, and not something that can be styled(*).
如果您谈论的是自动出现在divwith overflow: scroll（或auto）上的滚动条，那么不，那仍然是浏览器使用普通操作系统小部件呈现的本机滚动条，而不是可以设置样式（*）的东西。
Whilst you can replace it with a proxy made out of stylable divs and JavaScript as suggested by Matt, I wouldn't recommend it for the general case. Script-driven scrollbars never quite behave exactly the same as real OS scrollbars, causing usability and accessibility problems.
虽然您可以按照 Matt 的建议使用由可样式化的 div 和 JavaScript 组成的代理替换它，但我不建议将其用于一般情况。脚本驱动的滚动条的行为永远不会与真正的操作系统滚动条完全相同，从而导致可用性和可访问性问题。
(*: Except for the IE colouring styles, which I wouldn't really recommend either. Apart from being IE-only, using them forces IE to fall back from using nice scrollbar images from the current Windows theme to ugly old Win95-style scrollbars.)
(*: 除了 IE 着色样式，我也不会真正推荐它。除了仅限 IE 之外，使用它们会迫使 IE 从使用当前 Windows 主题的漂亮滚动条图像退回到丑陋的旧 Win95 样式滚动条.)
回答by u?nb??s
This can be done in WebKit-based browsers (such as Chrome and Safari) with only CSS:
这可以在仅使用 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
}?
References:
参考：
回答by Guillermo Nahuel Varelli
You can stablish specific toolbar for div
您可以为 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;
}
see demo in jsfiddle.net
在jsfiddle.net 中查看演示
回答by Matt
you might be interested in jScrollPane JQuery plugin, it seems easy to use http://jscrollpane.kelvinluck.com/
您可能对 jScrollPane JQuery 插件感兴趣，它看起来很容易使用 http://jscrollpane.kelvinluck.com/
回答by Charles Okwuagwu
This sets the scrollbar width:
这将设置滚动条宽度：
::-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>;
}
回答by Jim Fell
My experience with trying to use CSS to modify the scroll bars is don't. Only IE will let you do this.
我尝试使用 CSS 修改滚动条的经验不是。只有 IE 会让你这样做。
回答by Quentin
Yes.
是的。
If the scrollbar is not the browser scrollbar, then it will be built of regular HTML elements (probably divs and spans) and can thus be styled (or will be Flash, Java, etc and can be customized as per those environments).
如果滚动条不是浏览器滚动条，那么它将由常规 HTML 元素（可能是divs 和spans）构建，因此可以设置样式（或者是 Flash、Java 等，可以根据这些环境进行自定义）。
The specifics depend on the DOM structure used.
具体取决于所使用的 DOM 结构。
回答by Webmaster G
I don't understand why everyone is so happy with that bloated jscrollpane when there are easier lighter solutions out there, that are much faster when using the wheel: http://baijs.com/tinyscrollbar/
我不明白为什么每个人都对那个臃肿的 jscrollpane 如此满意，因为那里有更简单的解决方案，使用轮子时速度更快：http: //baijs.com/tinyscrollbar/
