Scroll
- Dom元素滚动时触发的Scroll事件
- 事件对象:window, Dom元素
- 事件捕捉:元素滚动条滚动时
滚动原理(滚动发生了什么?)
事件方法
方法名 | 说明 |
---|---|
onScroll |
滚动对象内部内容区域的滚动事件 |
onwheel |
鼠标滚轮滚动触发事件(主要和onScroll 做区别) |
scroll(x, y) 或 scroll(options) |
元素滚动到特定的坐标 |
scrollBy(x, y) 或 scrollBy(options) |
元素滚动一段特定的距离 x,y : 坐标 options: {x:0, y:2, behavior: 'smooth'} |
scrollTo(x, y) 或 scroll(options) |
元素滚动到特定的坐标(与scroll 方法部分重叠,但更常用于明确滚动到某点) |
属性
名称 | 说明 | 编辑性质 |
---|---|---|
scrollLeft |
滚动条到元素左边的距离 | 可读写 element.scrollLeft = 12px |
scrollTop |
滚动条到元素顶部的距离 | 可读写 element.scrollTop = 12px |
scrollHeight |
元素内部内容的总高度(包括超出容器高度的内容) | 只读 |
注意事项及性能优化
-
注意事项
- 简化滚动中的事件处理
- 滚动中不做样式修改、不修改dom元素
- 滚动中不强制停止或取消滚动事件
-
性能优化
- 为滚动事件添加防抖以及节流
scroll smooth
css {
scroll-behavior: smooth
}