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

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

但我想知道是否有可能以某种方式给滚动条组件一个 class 就像任何其他 HTML 元素一样，因为我得到了一个包含各种 CSS 公司的模板雇用我的人使用，在那些 CSS 中有他们拥有的颜色 classes（比如，backgroundcolor1，popupbackgroundcolor1，类似的东西），如果他们不知何故需要改变网站的颜色，他们只是改变了 css.

所以我想能不能给一个滚动条class，主要是为了优化代码，不用每次公司换颜色的时候自己改滚动条css他们的品牌，例如：

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

我知道我无法将 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>

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

Can I use CSS classes to customize a scrollbar without using webkit?

html

css

scroll

scrollbar