如何仅在水平滚动条上应用CSS

Question

我是一名新实习生，他们给了一个简单的任务：个性化水平滚动条我有这段代码，但垂直滚动条消失了...我需要它在垂直方向上默认...只有水平滚动条必须个性化。::-webkit-scrollbar{width:7px;}::-webkit-scrollbar-thumb:horizontal{border-radius:8px;background-color:rgba(92,92,92,0.5);}如

P粉538462187 · Answer

以下是有关如何仅设置水平滚动条样式的示例：

https://codepen.io/lmmm/pen/abKeEJw

您可以使用您想要设置样式的元素，并根据需要使用您的规则：


    horizontal text that overflows

#horizontal::-webkit-scrollbar {
  width: 7px;
}
#horizontal::-webkit-scrollbar-thumb:horizontal {
  border-radius: 15px;
  background-color: tomato;
}

P粉056618053 · Answer

您需要将伪装饰器与 div 链接起来才能应用样式。这意味着垂直拇指来自 body 或 HTML 标签。水平拇指用于内部 div。

#bars-chart-container::-webkit-scrollbar {
  width: 7px;
}
#bars-chart-container
::-webkit-scrollbar-thumb:horizontal {
  border-radius: 8px;
  background-color: rgba(92, 92, 92, 0.5);
}

这可能不会阻止内部 div 的垂直拇指消失，但到目前为止我在您的图像中看到，您不需要显示这一点。我不认为这可以通过其他方式实现。