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

Question

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

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

Answer 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作为垂直滚动条的宽度。）。

Answer 2

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

Answer 3

这可能会有所帮助

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

Answer 4

尝试一下

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