我该如何使用CSS样式水平滚动条？

Question

我该如何使用CSS样式水平滚动条？

112

我使用以下代码为我的垂直滚动条添加了样式：

::-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？

- Romanoti

3

根据这篇文章，存在一个:horizontal伪类，它可以用于自定义Webkit浏览器中的水平滚动条样式。 - Heretic Monkey

6个回答

59

这可能会有所帮助

   ::-webkit-scrollbar{
        height: 4px;
        width: 4px;
        background: gray;
    }
    ::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
    }

- Sifat Haque

1

非常感谢！我正好在找这个，这非常有用！ - ddjerqq

在我看来，应该接受这个答案，因为它使用了 :horizontal 伪元素。 - undefined

13

::-webkit-scrollbar:horizontal{
  height: 8px;
  background-color: red;
}
::-webkit-scrollbar-thumb:horizontal{
        background: #000;
        border-radius: 10px;
        
    }

- Prajeesh K P

1

请解释您的解决方案。仅包含代码而没有解释的答案将被标记为低质量。 - cursorrux

片段为空... - undefined

8

就像@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>

注意：-webkit-scrollbar在火狐浏览器和Edge 79及以下版本中不受支持。

- Abdulbasit

5

尝试这个

::-webkit-scrollbar {
    height: 8px;
    overflow: visible;
    width: 8px;
}

- shruti

1

在::-webkit-scrollbar selected中，高度代表水平滚动条，宽度代表垂直滚动条。您还可以使用:horizontal伪类。

- Koshin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roko C. Buljan · Accepted Answer

::-webkit-scrollbar {
  height: 4px;              /* height of horizontal scrollbar ← You're missing this */
  width: 4px;               /* width of vertical scrollbar */
  border: 1px solid #d5d5d5;
}

由于逻辑上不能强制垂直滚动条的高度成为某个特定的值（因为受定位父元素的限制），所以 height 属性 用于设置水平滚动条的高度，反之亦然（使用 width 属性设置垂直滚动条的宽度）。