如何通过CSS设置水平滚动条的样式？
我使用以下代码设置了垂直滚动条的样式:
::-webkit-scrollbar {
width: 4px;
border: 1px solid #d5d5d5;
}
::-webkit-scrollbar-track {
border-radius: 0;
background: #eeeeee;
}
::-webkit-scrollbar-thumb {
border-radius: 0;
background: #b0b0b0;
}
现在,我的垂直滚动条看起来像这样:
但是,我的水平滚动条看起来像这样:
如何为它设置2-4px的高度？
Rok*_*jan 36
::-webkit-scrollbar {
height: 4px; /* height of horizontal scrollbar ? You're missing this */
width: 4px; /* width of vertical scrollbar */
border: 1px solid #d5d5d5;
}
从逻辑上讲,一个人不能强迫垂直滚动条为某个高度(因为由定位的父级指定) - 因此这样的height属性是以水平的滚动条高度为目标- 反之亦然(width对于垂直滚动条的宽度).
- 添加高度解决了我的水平滚动条宽度（overflow-x的解决方案：自动水平滚动条） (2认同)
- 你让我很开心，兄弟！ (2认同)
Sif*_*que 19
这可能有帮助
::-webkit-scrollbar{
height: 4px;
width: 4px;
background: gray;
}
::-webkit-scrollbar-thumb:horizontal{
background: #000;
border-radius: 10px;
}
小智 14
::-webkit-scrollbar:horizontal{
height: 8px;
background-color: red;
}
::-webkit-scrollbar-thumb:horizontal{
background: #000;
border-radius: 10px;
}就像@roco上面指出的那样，由于垂直滚动条的高度无法修改，因此定义的高度将用于水平栏，但单独使用-webkit-scrollbar将解决水平栏的问题，但也会使垂直滚动条行为异常，为了获得最佳结果，请使用此代码，
::-webkit-scrollbar{
height: 4px;
width: 4px;
background: gray;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
::-webkit-scrollbar-thumb:horizontal{
background: #000;
border-radius: 10px;
}<!-- Just Focus with the CSS codes -->
<body style='width:200%'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at congue augue, sed dictum odio. Nunc imperdiet, lacus et consequat molestie, est lorem viverra mauris, id aliquet tortor purus vitae risus. In hac habitasse platea dictumst. Nulla ultrices fermentum maximus. Pellentesque accumsan condimentum finibus. Sed a mattis elit. Phasellus vel ullamcorper erat, eu euismod lorem. Nulla eu lorem ac mauris fringilla faucibus vel commodo ipsum.
Phasellus quis elementum dolor. Nulla dui nisl, ultrices et nulla pulvinar, placerat auctor libero. Morbi tristique vestibulum massa et varius. Donec posuere, nisl ac rutrum dictum, turpis tellus fringilla libero, ac feugiat elit metus ac augue. Nam justo turpis, blandit eget dui sit amet, molestie suscipit augue. Morbi erat velit, maximus a sem at, efficitur tempus mauris. In iaculis volutpat eros, vitae porttitor neque facilisis ac. Morbi ac maximus nunc. Fusce consectetur faucibus eros, nec aliquet nunc posuere vitae. Ut venenatis elementum lacus interdum finibus.
</p>
</body>注意：Firefox 或 Edge（79 之前的版本）不支持 -webkit-scrollbar。
小智 5
尝试这个
::-webkit-scrollbar {
height: 8px;
overflow: visible;
width: 8px;
}