html - 如何为每个容器创建不同的滚动条

Question

我在一个页面上有多个容器，我希望它们在每个容器中看起来都不同。 我正在使用 Angular5 进行开发，并且尝试通过定义

::-webkit-scrollbar {  
   /*contents are different in each css file.*/
   ...
} 

进入每个 css 文件。(每个容器都包含在它自己的组件中并使用它自己的 css 文件。) 但他们看起来还是一样的。 我该如何解决。 这真的很容易，但我不擅长 css，所以请帮助我。

Answer 1

HTML:

<div class="container sidebar">
 ...
</div>
<div class="container contents">
 ...
</div>

CSS:

.sidebar ::-webkit-scrollbar {
 ...
}
.contents ::-webkit-scrollbar {
 ...
}