CSS CSS3 / webkit：如何更改滚动条滑块的大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9232529/
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
Css3 / webkit: how do I change the size of the scroll bar slider?
提问by NullVoxPopuli
fiddle: http://jsfiddle.net/vVJGD/
小提琴：http: //jsfiddle.net/vVJGD/
::-webkit-scrollbar{
width: 10px;
padding-top: 40px;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
border: 1px solid black;
background: rgb(41,41,41);
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
border-radius:10px;
height: 30px;
width: 8px;
border: 1px solid black;
background: rgb(111,111,111);
-webkit-box-shadow: 0 1px 1px rgb(0,0,0);
background: -webkit-linear-gradient(rgb(200,200,200), rgb(150,150,150));
}
::-webkit-scrollbar-track-piece {
height: 30px;
}
I've tried to set the height via track-piece and thumb, but I don't think that's the correct way.
我试图通过轨道件和拇指设置高度，但我认为这不是正确的方法。
Anyone know the secret? I didn't find anything on google this specific.
有谁知道其中的秘密吗？我没有在谷歌上找到任何特定的东西。
采纳答案by Blender
Set the heightand widthproperties: http://jsfiddle.net/vVJGD/8/, Webkit will assign them to the appropriate orientation.
设置height和width属性：http: //jsfiddle.net/vVJGD/8/，Webkit会将它们分配到适当的方向。
回答by Murillo
Yes, it is possible. We can edit in the css the style:
对的，这是可能的。我们可以在css中编辑样式：
::-webkit-scrollbar-thumb {
background: #bbbbbb;
background: rgba(0, 0, 0, 0.15);
border-radius: 5px;
height: 50px; }
回答by 11-
Unless I'm misunderstood your question...
除非我误解了你的问题......
You can do this by setting a margin on ::-webkit-scrollbar-track. Using 50px as an example number...
您可以通过在 上设置边距来做到这一点::-webkit-scrollbar-track。使用 50px 作为示例数字...
For vertical scrollbars: margin: 50px 0;
对于垂直滚动条： margin: 50px 0;
For horizontal scrollbars: margin: 0 50px;
对于水平滚动条： margin: 0 50px;
I haven't tested this extensively so I don't know any issue it may cause.
我没有对此进行过广泛的测试，所以我不知道它可能导致的任何问题。
Example of it working on above JSFiddle: http://jsfiddle.net/qrgc8spm/
它在 JSFiddle 上方工作的示例：http: //jsfiddle.net/qrgc8spm/
