大多数网页的内容一屏都无法完全显示，所以我们需要滚动条来支持我们的网页，就有了这篇博客
1.了解滚动条的不同表现
在不同的系统中
在windows上，滚动条的样式是上下箭头+中间部分，如果一屏显示不全内容，滚动体默认会存在
在mac上，滚动条默认是隐藏的，只有在用户触发滚动的时候才会出现滚动条
在不同浏览器中
mac系统：所有浏览器都是15px
window系统：IE、火狐、chrome 17px；edge：16px；opera：15px
这些不同的滚动条表现对于开发者而言，必须要进行处理比如，样式保持一致、强制出现/不出现滚动条，粘性布局、节流操作等等。
2. 处理滚动条的显示和样式
css属性overflow，当一个元素内容过大而无法适应 块级上下文的时候怎么做？它是overflow-x 和 overflow-y的简写形式。
overflow: visible(默认值)，内容不会被修剪，会呈现在元素框之外
overflow: hidden 内容会被修剪，多余内容不可见
overflow: scroll 内容会被修剪，滚动条一直存在
overflow: auto 由浏览器定夺，如果修剪内容便会显示滚动条
修改样式
chrome、safari、opera等大部分浏览器都支持修改样式、包括宽度、颜色、圆角
::-webkit-scrollbar {
8px;
}
::-webkit-scrollbar-thumb {
background-color: #c1c1c1;
border-radius: 4px;
}
css 做 sticky效果，只需确定方向上的距离即可，其他的浏览器帮我们实现
.element {
position: sticky;
top: 50px;
}
3. 滚动条的关于js的特性
1.scroll事件是不能冒泡的，通过console.log打印事件参数event对象的bubbles属性，返回值true是可冒泡 false不冒泡，所以滚动条通信在捕获这个阶段
2. 滚动条是在容器内容过多的容器上，监听容器元素onscroll事件
3. 当页面有做个滚动条，内层滚动条会优先滚动，当内层滚动条滚动到边界时，才会启动外层的滚动条
4.监听滚动条的回调函数尽量使用节流函数