html - 同一 的 x 轴和 y 轴滚动条的不同样式

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;
}

请参阅此处了解更多详细信息，第二部分“不同的状态”: https://css-tricks.com/custom-scrollbars-in-webkit/