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

Question

我是一名新实习生，他们给了一个简单的任务：个性化水平滚动条

我有这段代码，但垂直滚动条消失了...我需要它在垂直方向上默认...只有水平滚动条必须个性化。

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

如果我将下面的代码放在中间，垂直滚动条也会个性化...所以我只能将其个性化或根本隐藏它...而我不能这样做

::-webkit-scrollbar-thumb {                             
-webkit-appearance: none;
}

Answer 1

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

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

Answer 2

您需要将伪装饰器与 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 的垂直拇指消失，但到目前为止我在您的图像中看到，您不需要显示这一点。我不认为这可以通过其他方式实现。