前端开发之:js基础系列-浏览器滚动事件

Scroll

  1. Dom元素滚动时触发的Scroll事件
  2. 事件对象:window, Dom元素
  3. 事件捕捉:元素滚动条滚动时

滚动原理(滚动发生了什么?)

事件方法

方法名 说明
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 元素内部内容的总高度(包括超出容器高度的内容) 只读

注意事项及性能优化

  • 注意事项

    1. 简化滚动中的事件处理
    2. 滚动中不做样式修改、不修改dom元素
    3. 滚动中不强制停止或取消滚动事件
  • 性能优化

    1. 为滚动事件添加防抖以及节流

scroll smooth

css {
  scroll-behavior: smooth
}
上一篇
下一篇