自定义滚动条样式

哪些地方会出现滚动条

滚动条通常会出现在这些地方

1、iframe

2、任何元素的设置成块元素，overflow设置成scroll

3、页面内容超过浏览器视窗的大小

4、textarea内容过多时

滚动条的组成

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

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

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

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

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

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

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

下面是我自己根据项目的需求写的一个滚动条样式

.scroll {

     box-sizing: border-box;

     &::-webkit-scrollbar {width: 8px;background-color: #E7EAF0;}

     &::-webkit-scrollbar-thumb {border-radius: 4px;background-color: #e1e1e2;}

     &::-webkit-scrollbar-track {background-color: #fff;}

     &::-webkit-scrollbar-button {background-color: red;display: none;}

}

样式如下图

自定义滚动条样式如上图

注：Webkit浏览器包括谷歌，Safari，以及最新的Opera等浏览器。但遗憾的是，对于火狐浏览器，css滚动条属性基本没有做什么改进。