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

Question

Basically what the title says, I have to customize a scrollbar and I know I can use webkit on a css file to do it, which I already did:

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

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

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

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

But I wanna know if it's possible to somehow give the scrollbar components a class just like any other HTML element, because I was given a template with various CSS the company that hired me uses, and in those CSS's there are colors as they own classes (like, backgroundcolor1, popupbackgroundcolor1, stuff like that) and if they somehow need to change the colors of the websites, they just change that css.

So I was wondering if I can give a class to a scrollbar, mainly to optimize the code and there's no need to change the scrollbar css by itself everytime the company changes the colors of their brand, something like:

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

I know that I can't import a css into another one so that's out of the question. Is there something I'm forgetting here or I have to use a custom css for the scrollbar?

Answer 1

you can give id or class to give scroll style to your desire place. check below code example

#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>