哪些地方会出现滚动条
滚动条通常会出现在这些地方
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滚动条属性基本没有做什么改进。
作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/e24a8238e61b
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/1873/viewspace-2813575/ ，如需转载，请注明出处，否则将追究法律责任。
