如何通过 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 的高度？

原文由 Romanoti 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Roko C. Buljan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这可能有帮助

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

原文由 Sifat Haque 发布，翻译遵循 CC BY-SA 3.0 许可协议