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

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 {
 ...
}