前端开发之: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)元素滚动到特定的坐标

属性

名称说明编辑性质
scrollLeft滚动条到元素左边的距离可读写 element.scrollLeft = 12px
scrollTop滚动条到元素顶部的距离可读写 element.scrollTop = 12px
scrollHeight元素内部内容的总高度(包括超出容器高度的内容)只读

注意事项及性能优化

  • 注意事项
    1. 简化滚动中的事件处理
    2. 滚动中不做样式修改、不修改dom元素
    3. 滚动中不强制停止或取消滚动事件
  • 性能优化
    1. 为滚动事件添加防抖以及节流

scroll smooth

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