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
}