相同的 x 轴和 y 轴滚动条的不同样式 <div>

Question

假设我有一个 div:

<div class="nav-menu"/>

我正在尝试使用 ::scrollbar 伪元素为滚动条自定义 CSS 样式：

.nav-menu::-webkit-scrollbar {
    width: 8px;
    background: white;
}

但是这种样式适用于 x 轴和 y 轴滚动条。有什么方法可以仅使用纯 CSS 来设置不同的样式吗？

Answer 1

我对此不是 100% 确定，但我认为您可以像这样将水平和垂直滚动条的样式分开。

水平：

.nav-menu::-webkit-scrollbar-thumb:horizontal  {
    height: 8px;
    background: gray;
}

垂直：

.nav-menu::-webkit-scrollbar-thumb:vertical {
    width: 8px;
    background: white;
}

有关更多详细信息，请参阅此处，第二部分 'The Different States'： https://css-tricks.com/custom-scrollbars-in-webkit/

Different styles for x-axis and y-axis scrollbars of the same <div>