如何通过 CSS 设置水平滚动条的样式？答案

【问题标题】：How can I style horizontal scrollbar by CSS?如何通过 CSS 设置水平滚动条的样式？
【发布时间】：2017-11-04 04:05:48
【问题描述】：

我使用以下代码设置了垂直滚动条的样式：

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

【问题讨论】：

根据this article有一个:horizontal伪类...

标签： html css

【解决方案1】：

::-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】：

这可能会有所帮助

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：

【解决方案4】：

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

【讨论】：

请解释您的解决方案。没有解释且只有代码的答案会被标记为省力。

【解决方案5】：

在::-webkit-scrollbar selected里面，高度代表水平滚动条，宽度代表垂直滚动条。你也可以使用:horizontalpsuedoclass。

【讨论】：

【解决方案6】：

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

注意：Firefox 或 Edge 79 之前的版本不支持 -webkit-scrollbar。

【讨论】：