同一 <div> 的 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/