关于scroll的前端知识

标签：win   event对象   网页   hid   开发   形式   实现   opera   等等   

大多数网页的内容一屏都无法完全显示，所以我们需要滚动条来支持我们的网页，就有了这篇博客

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 {
  width: 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.监听滚动条的回调函数尽量使用节流函数

关于scroll的前端知识

标签：win   event对象   网页   hid   开发   形式   实现   opera   等等   

原文地址：https://www.cnblogs.com/czy960731/p/12259532.html