Html 如何通过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-4倍的高度

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

由于从逻辑上讲，无法强制垂直滚动条具有一定的高度（因为由定位的父项指定），因此此类

高度属性

的目标是水平滚动条的高度，反之亦然（垂直滚动条的宽度为

宽度

）.

这可能会有所帮助

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

---

试试这个

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

---

在

：：-webkit scrollbar selected

，高度表示水平滚动条，宽度表示垂直滚动条。您也可以使用

：horizontal

psuedoclass。

根据有一个

：horizontal

伪类…添加高度解决了我的水平滚动条宽度（溢出解决方案-x：自动水平滚动条）高度是正确的选择。。。