一、滚动条的形成:
当内容超出容器时,容器会出现滚动条。
二、如需改变滚动条样式,可通过css伪类来实现。
- 首先我们要了解滚动条。滚动条从外观来看是由两部分组成:
1,可以滑动的部分,我们叫它滑块
2,滚动条的轨道。
- 滚动条的css样式主要有三部分组成:
1,::-webkit-scrollbar 定义了滚动条整体的样式;
2,::-webkit-scrollbar-thumb 滑块部分;
3,::-webkit-scrollbar-track 轨道部分;
三、代码实现:
效果图:
html代码:
<div class="test"> <div class="scrollbar"></div> </div>
css代码
.test{
50px;
height: 200px;
overflow: auto;
float: left;
margin: 5px;
border: none;
}
.scrollbar{
30px;
height: 300px;
margin: 0 auto;
}
// 滚动条
.test::-webkit-scrollbar{
6px;
height: 206px;
background: #3d6599;
margin-top: 20px;
}
// 滑块
.test::-webkit-scrollbar-thumb {
border-radius: 10px;
// -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: #85baff;
height: 120px;
}
// 滑块轨道
.test::-webkit-scrollbar-track{
// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #3d6599;
// height: 206px;
// border: 1px solid red;
}
注意:进度条的样式不要嵌套在class为test的样式里,需要写在.test样式外。