Html 如何通过 CSS 设置水平滚动条的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44334106/
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
How can I style horizontal scrollbar by CSS?
提问by Romanoti
I styled my vertical scrollbars with the following code:
我使用以下代码设置了垂直滚动条的样式：
::-webkit-scrollbar {
width: 4px;
border: 1px solid #d5d5d5;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}
Now, my vertical scrollbar looks like this:
现在，我的垂直滚动条如下所示：
However, my horizontal scrollbar looks like this :
但是，我的水平滚动条如下所示：
How can I set a 2-4px height for it?
如何为它设置 2-4px 的高度？
回答by Roko C. Buljan
::-webkit-scrollbar {
height: 4px; /* height of horizontal scrollbar ← You're missing this */
width: 4px; /* width of vertical scrollbar */
border: 1px solid #d5d5d5;
}
since logically one cannot force a vertical scrollbarto be a certain height(since dictated by the positioned parent) - therefore such heightpropertyis to target the horizontal's scrollbarheight - and vice-versa(widthfor the width of the vertical scrollbar.).
因为逻辑上不能强制垂直滚动条具有一定的高度（因为由定位的父级决定） - 因此这种height属性是针对水平滚动条的高度 -反之亦然（width对于垂直滚动条的宽度。）。
回答by Sifat Haque
This may help
这可能有帮助
::-webkit-scrollbar{
height: 4px;
width: 4px;
background: gray;
}
::-webkit-scrollbar-thumb:horizontal{
background: #000;
border-radius: 10px;
}
回答by shruti
Try This
尝试这个
::-webkit-scrollbar {
height: 8px;
overflow: visible;
width: 8px;
}
