如何用CSS设计水平滚动条的样式？

ddrv8njm 于 2023-01-14 发布在其他

关注(0)|答案(6)|浏览(154)

我用下面的代码设计了垂直滚动条的样式：

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

css

来源：https://stackoverflow.com/questions/44334106/how-can-i-style-horizontal-scrollbar-by-css

6条答案

按热度按时间

qlfbtfca1#

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

因为逻辑上不能强制垂直滚动条为某一 * 高度 （因为由定位的父指定）-因此这样的*height属性是以水平滚动条的**高度为目标-并且 * 反之亦然 *（width用于垂直滚动条的宽度）。

赞(0）回复(0）举报 2023-01-14

uxhixvfz2#

这可能会有帮助

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

赞(0）回复(0）举报 2023-01-14

pqwbnv8z3#

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

赞(0）回复(0）举报 2023-01-14

cl25kdpy4#

试试这个

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

赞(0）回复(0）举报 2023-01-14

js81xvg65#

正如@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在Firefox或Edge 79之前的版本中不受支持。

赞(0）回复(0）举报 2023-01-14

zlwx9yxi6#

在::-webkit-scrollbar selected中，height表示水平滚动条，width表示垂直滚动条，也可以使用:horizontal psuedoclass。

赞(0）回复(0）举报 2023-01-14