Intersection Observer 详解-阿里云开发者社区

Intersection Observer 详解

2023-04-26 384

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在一些场景下，尤其是在移动端，我们需要判断元素是否进入用户视口（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：当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数，进入视口和离开视口都会触发

entries：IntersectionObserverEntry列表，。
observer：被调用的IntersectionObserver实例。

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：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
isIntersecting：布尔值，表示目标元素的相交状态变化，true 表示从不相交到相交（即出现在视口），false 反之

Intersection Observer 详解

构造器

方法

observe

unobserve

takeRecords

disconnect

应用场景

懒加载

无限滚动

IntersectionObserverEntry

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Intersection Observer 详解

构造器

方法

observe

unobserve

takeRecords

disconnect

应用场景

懒加载

无限滚动

IntersectionObserverEntry

热门文章

最新文章

相关电子书