• 前言：

作为一个前端，在编辑页面的时候，有的时候遇到滚动条，会觉得浏览器自带的滚动条样式太丑，可能会与设计的美美的页面格格不入，但是滚动效果又必须存在。那么，这个时候就会想到要是能改变滚动条的样式，或者将滚动条隐藏掉更好一些。那么，怎样做到改变滚动条的样式呢？

这里介绍的是css3的一个样式，-webkit-scrollbar。

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式。但是因为他是css3样式，所有浏览器兼容性还是存在问题的。

• 演示：

 css3滚动条样式demo：

• 滚动条组成：

• ::-webkit-scrollbar 滚动条整体部分

• ::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）

• ::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）

• ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。

• ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）

• ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处

• ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

• 例如：

  隐藏滚动条：

  
  

   代码如下：

<style>

*{margin: 0;padding: 0;border: 0;outline: 0;background: transparent;}

.aa{width: 200px;max-height: 300px;background: transparent;overflow: hidden;position: relative;overflow-y:scroll!important}

.aa::-webkit-scrollbar {

    display: none;

}

.bb{height: 500px;}

span{margin-top: 400px;display: block;}

</style>

<div class="aa">

<div class="bb">

11

<span>22</span>

</div>

</div>

• 详解

1. /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  

2. ::-webkit-scrollbar  

3. {  

4.     width: 16px;  

5.     height: 16px;  

6.     background-color: #F5F5F5;  

7. }  

8.   

9. /*定义滚动条轨道 内阴影+圆角*/  

10. ::-webkit-scrollbar-track  

11. {  

12.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);  

13.     border-radius: 10px;  

14.     background-color: #F5F5F5;  

15. }  

16.   

17. /*定义滑块 内阴影+圆角*/  

18. ::-webkit-scrollbar-thumb  

19. {  

20.     border-radius: 10px;  

21.     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);  

22.     background-color: #555;  

23. }