css控制滚动条透明,CSS控制滚动条样式的解析

我们在之前的两篇文章中，我们给大家介绍了关于CSS设置div滚动条样式、以及CSS3自定义滚动条样式的实例， 都知道当内容超出容器时，容器会出现滚动条，那我们如何使用CSS控制滚动条样式的呢？今天就给大家详细介绍！

例子：/*作为IT界最前端的技术达人，页面上的每一个元素的样式我们都必须较真，就是滚动条我们也不会忽略。

下面我给大家分享一下如何通过CSS来控制滚动条的样式，代码如下：*/

/*定义滚动条轨道*/

#style-2::-webkit-scrollbar-track

{

background-color: #F5F5F5;

-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);

}

/*定义滚动条高宽及背景*/

#style-2::-webkit-scrollbar

{

width: 10px;

background-color: rgba(0, 0, 0, 0.34);

}

/*定义滚动条*/

#style-2::-webkit-scrollbar-thumb

{

background-color: #8b8b8b;

border-radius: 10px;

}