(1) 属性
- [1]
::-webkit-scrollbar
滚动条整体部分
- [2]
::-webkit-scrollbar-button
滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
- [3]
::-webkit-scrollbar-track
滚动条的轨道(里面装有Thumb)
- [4]
::-webkit-scrollbar-track-piece
内层轨道,滚动条中间部分
- [5]
::-webkit-scrollbar-thumb
滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
- [6]
::-webkit-scrollbar-corner
边角,即两个滚动条的交汇处
- [7]
::-webkit-resizer
两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/df6c7371f47d08fc011424d5d18981f0.png)
(2) 实例
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/079aa01d1ea4431f17fe86474b3c55e7.png)
<div id="wrapper">
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-7">
<div class="force-overflow">&l