我可以使用CSS类来自定义滚动条而不使用webkit吗？

Question

基本上正如标题所说，我必须自定义一个滚动条，并且我知道我可以在 css 文件上使用 webkit 来做到这一点，我已经这样做了：

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #555;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(26, 26, 26);
}

但是我想知道是否可以以某种方式为滚动条组件提供一个类，就像任何其他 HTML 元素一样，因为我得到了一个包含雇用我的公司使用的各种 CSS 的模板，并且在这些 CSS 中，有颜色，因为它们拥有类（例如，backgroundcolor1、popupbackgroundcolor1，诸如此类），如果他们需要以某种方式更改网站的颜色，他们只需更改 css 即可。

所以我想知道是否可以给滚动条一个类，主要是为了优化代码，并且不需要每次公司更改其品牌的颜色时都自行更改滚动条CSS，例如：

<div class="bgcolor1">
    scrollbar goes here
<div>

我知道我无法将 CSS 导入另一个 CSS，所以这是不可能的。 我在这里忘记了什么，还是我必须为滚动条使用自定义 css？

Answer 1

您可以提供 id 或 class 来为您想要的位置提供滚动样式。检查下面的代码示例

#scrollstyle::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#scrollstyle::-webkit-scrollbar {
  width: 7px;
  background-color: #F5F5F5;
}

#scrollstyle::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #cccccc;
}

<div id="scrollstyle" style="height:200px; overflow-y:scroll;">
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
  <p>this is paragraph</p>
</div>

Answer 2

我认为这就是您正在寻找的：https://developer.chrome.com/blog/custom-scrollbar/

另请参阅此概述： https://css-tricks.com/almanac/properties/s/scrollbar/

更详细的看： https://css-tricks.com/the-current-state-of-styling-scrollbars-in-css/