Intersection Observer 详解

简介: 在一些场景下,尤其是在移动端,我们需要判断元素是否进入用户视口(viewport),来进行以下处理,例如无限滚动,当底部元素进入视口之后加载下一页内容。

在一些场景下,尤其是在移动端,我们需要判断元素是否进入用户视口(viewport),来进行以下处理,例如无限滚动,当底部元素进入视口之后加载下一页内容。

通常的做法是监听 scroll 事件,然后调用目标元素的 getBoundingClientRect 方法获取元素位置,判断其是否出现在视口之内,缺点是 scroll 触发非常密集,导致计算量很大。

现在新出的 IntersectionObserver 可以自动观察元素是否可见,截止 2022.07.31 其浏览器的适配情况如下

1682518262(1).png

那么接下来我们就来看一下它的具体语法。


构造器


var observer = new IntersectionObserver(callback[, options]);

构造器返回一个 IntersectionObserver 对象

如果指定rootMargin则会检查其是否符合语法规定,检查阈值以确保全部在 0.0 到 1.0 之间,并且阈值列表会按升序排列。如果阈值列表为空,则默认为一个 [0.0] 的数组。

  • callback:当元素可见比例超过指定阈值后,会调用一个回调函数,此回调函数接受两个参数,进入视口和离开视口都会触发
  • options:用来配置 observer 实例的对象,如果 options 未指定,observer 实例默认使用文档视口作为 root,并且没有 margin,阈值为 0%
  • root:监听元素的祖先元素 Element 对象,其边界盒将被视作视口。
  • rootMargin:一个在计算交叉值时添加至根的边界盒中的一组偏移量,默认值是"0px 0px 0px 0px"。
  • threshold:规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组 0.0 到 1.0 之间的数组。

1682518298(1).png

当rootMargin不存在时会抛出语法错误,SyntaxError

一个或多个阈值超出了 0.0 到 1.0 的范围时会抛出返回错误,RangeError


方法


同其他 Observer API 一样,IntersectionObserver 也提供了那几个方法,下面我们将按照这套模板来演示各个 API 的效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #container {
      width: 200px;
      height: 300px;
      overflow: auto;
      background-color: #fff;
    }
    .content {
      height: 200px;
    }
    .content:nth-of-type(odd) {
      background-color: pink;
    }
    .content:nth-of-type(even) {
      background-color: blue;
    }
    #footer {
      background-color: red;
      height: 30px;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="content"></div>
    <div class="content"></div>
    <div id="footer">到底了</div>
  </div>
  <script src="./index.js"></script>
</body>
</html>
复制代码

observe

添加监听元素,当元素出现或消失在视口中时触发 observer 的回调

const footer = document.getElementById('footer');
const observer = new IntersectionObserver((entries) => {
  console.log(entries);
})
observer.observe(footer)
复制代码

在页面上进行滚动时就能看到效果,如果是显示触发的,isIntersecting 值为 true,如果是隐藏触发的,isIntersecting 的值就是 false

1682518352(1).png

unobserve

observer.unobserve(document.getElementById('footer'))
复制代码

取消观察后滚动元素不再触发回调

1682518378(1).png

takeRecords

返回一个IntersectionObserverEntry对象,每个对象的目标都包含每次相交的信息,可以通过调用此地地观察者的方法显式或隐式调用。

Note: 如果使用回调来监视这些更改,则无需调用此方法。调用此方法会清除挂起的相交状态列表,因此不会运行回调。

const intersectionObserverEntries = intersectionObserver.takeRecords();
复制代码

disconnect

停止当前 observer 对所有元素的监听

observer.disconnect()
复制代码


应用场景


懒加载

一些元素,如图片等,在 DOM 渲染阶段可以不加载,当图片出现在视口时开始加载

// 省略 20 个 img 元素
const observer = new IntersectionObserver(
  (changes) => {
    console.log(changes);
    changes.forEach(({ target, isIntersecting }) => {
      if (!target.src && isIntersecting)
        target.src = target.dataset.src
    });
  }
);
Array.from(document.querySelectorAll('img'))
  .forEach((item) => {
    observer.observe(item);
  });
复制代码

我们通过触发监听器的元素解构获得 target 元素和 isIntersecting 属性,通过元素是否存在 src 属性和是否进入视口来处理图片

最终效果如下

1682518406(1).png

无限滚动

当靠近列表底部时,开始加载下一页内容

const container = document.getElementById('container'); // ul元素
const footer = document.getElementById('footer'); // div
let id = 1 // 递增 id
const observer = new IntersectionObserver((entries) => {
  entries.forEach(({ isIntersecting }) => {
    if (isIntersecting) {
      footer.innerText = 'loading...'
      setTimeout(() => {
        const newList = []
        for (let i = 0; i < 20; i++) {
          const li = document.createElement('li')
          li.appendChild(document.createTextNode(id++))
          container.appendChild(li)
        }
        footer.innerText = '到底了'
      }, 2000)
    }
  })
})
observer.observe(footer)
复制代码

监听 footer 元素,当 footer 元素出现在视口中时开始请求数据,这里用定时器进行模拟,将新的元素添加到无需列表中。

效果如下:

1682518432(1).png

IntersectionObserverEntry

  • time:可见性发生变化的时间,是一个高精度时间戳,单位为毫秒
  • target:被观察的目标元素,是一个 DOM 节点对象
  • rootBounds:根元素的矩形区域的信息,getBoundingClientRect()方法的返回值,如果没有根元素(即直接相对于视口滚动),则返回null
  • boundingClientRect:目标元素的矩形区域的信息
  • intersectionRect:目标元素与视口(或根元素)的交叉区域的信息
  • intersectionRatio:目标元素的可见比例,即intersectionRectboundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
  • isIntersecting:布尔值,表示目标元素的相交状态变化,true 表示从不相交到相交(即出现在视口),false 反之


相关文章
|
UED
生命中的开关:深入探讨Deactivated和Activated生命周期
生命中的开关:深入探讨Deactivated和Activated生命周期
269 1
|
缓存 资源调度 编译器
原来是这样啊!浅谈webpack4和webpack5的区别
相对于webpack4,webpack5内置了很多plugin插件,比如、打包、压缩、缓存
939 1
|
定位技术 API
基于Leaflet.draw的自定义绘制实战
本文介绍了如何基于leaflet.draw进行自定义绘制,同时获取对象的bbox和geojson信息。
1042 0
基于Leaflet.draw的自定义绘制实战
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
317 0
|
JavaScript 前端开发 开发者
|
6月前
|
开发者 容器
小白必看 HarmonyOS Next HMRouter 轻松上手秘籍
本文详细介绍了HarmonyOS页面跳转解决方案——HMRouter的使用方法,帮助开发者快速上手。HMRouter封装了系统Navigation能力,提供路由拦截、页面生命周期管理、自定义转场动画等功能,简化开发流程。文章通过具体示例讲解模块内及跨模块页面跳转、路由传参、自定义动画、拦截器和生命周期管理等核心功能。同时,提供了丰富的资源链接,包括接口文档、高级动画教程和常见问题解答,适合初学者系统学习HMRouter的使用与原理。
468 9
小白必看 HarmonyOS Next HMRouter 轻松上手秘籍
|
安全
如何打开关闭Edge鼠标手势
【8月更文挑战第28天】本文介绍了在 Microsoft Edge 浏览器中开启和关闭鼠标手势的方法。首先,通过浏览器设置菜单进入设置页面;然后,查找“鼠标手势”设置或在相关类别中搜索。由于 Edge 可能未内置此功能,可考虑安装支持鼠标手势的扩展程序,如 CrxMouse 鼠标手势,以实现该功能。安装时需注意安全性和可靠性。
4999 5
|
存储 JavaScript API
Vue3实现图片懒加载及自定义懒加载指令
Vue3实现图片懒加载及自定义懒加载指令
1075 0
|
移动开发 JSON 前端开发
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据,程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性,点击按钮可切换图表类型,图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据,两个绘制函数(drawPieChart、drawBarChart)用于生成饼状图和柱状图,以及输入验证和颜色生成辅助函数。
459 1

热门文章

最新文章