IntersectionObserver 实用方向

上一篇文章讲了在 js 中如何实现图片懒加载,这一篇则讲解,如何实现滑动到底部加载更多。
跟图片懒加载一样,滑动到底部加载更多,一般传统方式是监听 scroll 事件,现在有更简单的方式为 IntersectionObserver

传统方式(scroll)

通过监听滚动容器的 scroll 事件,每次滑动后,判断是否已经滑动到了底部,如果已经滑动到了底部,则触发加载事件。

let timer = -1 // 函数防抖
let $scroll = document.querySelector('#scroll') // 滑动的容器

// 为滑动的容器添加 scroll 事件
$scroll.addEventListener('scroll', function () {
  clearTimeout(timer)
  timer = setTimeout(() => {
    // 滚动所在容器的可视高度
    let height = $scroll.getBoundingClientRect().height
    let top = $scroll.scrollTop // 滚动的距离
    let scrollHeight = $scroll.scrollHeight // 滚动容器的实际高度
    if (scrollHeight - top - height <= 60) {
      // 处于滑动临界值内,处理加载更多
      loadmore() // 加载更多
    }
  }, 150) // 避免过于频繁,防抖
})

跟图片懒加载一样,由于频繁的触发 scroll 的性能影响问题,使用 IntersectionObserver 能够解决这个问题。

IntersectionObserver

要使用 IntersectionObserver 来判断是否滑动到底部,我们就需要在列表的底部,添加一个元素用来占位,同时我们可以给这个元素加一个提示,这样我们既能通过代码判断是否滑动到底部,同时又给出了友好的提示。

let $loadmoreTip = document.querySelector('.loadmore-tip')
// 构建观察器
let observer = new IntersectionObserver((entries) => {
  for (let entry of entries) {
    /*
     * 检测节点是否可见,可以通过 isIntersecting 验证,布尔值
     * 如果目标元素与交叉区域观察者对象(intersection observer)的根相交,返回 true
     * 此时描述了变换到交叉时的状态; 
     * 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态.
     * 同时也可以根据 intersectionRatio 验证
     * intersectionRatio:目标元素的可见比例
     * 即 intersectionRect 占 boundingClientRect 的比例
     * 完全可见时为1,完全不可见时小于等于0
     * 如果不可见,就返回:
     *   if (entry.intersectionRatio <= 0) return;
     */
    if (entry.isIntersecting === true) { // 检测节点是否可见
      // 处于交叉可见状态
      loadmore()
    }
  }
}, { threshold: 0.6 });

// 往观察器列表注册观察元素
observer.observe($loadmoreTip);
上一篇:Quartz任务调度器


下一篇:Spring AOP不拦截从对象内部调用的方法原因