窗口上下滚动处理

紫微前端

于 2021-04-20 14:19:02 发布

阅读量3.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：常用代码片段

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/115905829

常用代码片段专栏收录该内容

168 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨了如何有效地处理网页窗口的上下滚动，优化用户体验。通过使用Intersection Observer API监测元素的可见性，实现滚动时的内容加载和预加载。同时，介绍了如何运用防抖和节流技术减少滚动事件触发的频率，降低CPU和GPU负载，提高页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

export function handleScrollHeader (callback) {
  let timer = 0

  let beforeScrollTop = window.pageYOffset
  callback = callback || function () {}
  window.addEventListener(
    'scroll',
    event => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        let direction = 'up'
        const afterScrollTop = window.pageYOffset
        const delta = afterScrollTop - beforeScrollTop
        if (delta === 0) {
          return false
        }
        direction = delta > 0 ? 'down' : 'up'
        callback(direction)
        beforeScrollTop = afterScrollTop
      }, 50)
    },
    false
  )
}