无限滚动在实际项目中用到很多,比较在vipkid 数字图书馆的的书库这个业务中,就用到滚动加载,如下视频所示

无限滚动

正常思路是,我们监听scroll事件,当滚动条滑到底部的时候,触发加载,请求数据,将新数据插入尾部。

这里面,我们会碰到两个问题,

  • 1.一个是scroll 事件的触发,会触发的非常频繁,
  • 2.dom节点会越来越多

作为专业的前端工程师,一般都会考虑这两个问题。scroll事件的触发,在这里我们可以使用throttle来保证每隔一定时间来进行. 此处我们会加上passive为true l来明确告诉浏览器,事件处理程序不会调用preventDefault来阻止默认行为。

关于在滑动过程中有可能导致的强制重排,我们假设都考虑到,我们的代码估计如下所示

<script>
  window.addEventListener("scroll",
    throttle(() => {}, 250), {
      passive: false
    })
</script>

但是再怎样,scroll还会频繁的触发,1秒钟执行4次。chrome74 起提供了IntersectionObserver 这个API ,我们可以使用这个api 来实现无限加载。

IntersectionObserver接口 提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法 . 就是说可以这个接口可以检测 某个元素是否进入可视区域或退出可视区域,我们可以根据这个特点,实现无限滚动加载。

发表评论

电子邮件地址不会被公开。 必填项已用*标注