观察者（IntersectionObserver API）的基本使用（入门篇）

最新推荐文章于 2024-05-18 16:08:18 发布

Hope°

最新推荐文章于 2024-05-18 16:08:18 发布

阅读量778

点赞数 1

分类专栏：笔记 js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_52773472/article/details/116988360

版权

笔记同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

20 篇文章 0 订阅

订阅专栏

用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

介绍

一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。

操作

操作为监听一个列表的首尾是否进入视窗。
定义一个new IntersectionObserver（callback,option）
注意：此文档只使用到了callback

观察者建造

 //观察者建造
 var observer = new IntersectionObserver((entries, observe) => {
  })

监听观察对象

可以监听指定的元素，也可以监听所有元素.
遍历所有的话就可以监听所有元素。

	//获取所有li
    var lis = document.querySelectorAll('li')
   // 监听第一个
    observer.observe(document.querySelectorAll('li')[0])
    // 监听最后一个
    observer.observe(lis[lis.length - 1])

补充：监听所有元素

    // 遍历所有的
    document.querySelectorAll("li").forEach(i=>{
      observer.observe(i)
    })

开始监听

  var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          if (i.target.id == 'first') {
            first(i)
          } else if (i.target.id == 'last') {
            last(i)
          }
        }
      })
    })
    
    function first(val) {
      console.log('first')
    }
    function last() {
      console.log('last')
    }

完整代码

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 200px;
        height: 200px;
        background: red;
        overflow-y: scroll;
        margin: 20px auto;
      }
      #box li {
        height: 30px;
        list-style: none;
        border-bottom: 1px solid #000;
      }
    </style>
  </head>
  <body>
    <ul id="box">
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li id="last">20</li>
    </ul>
  </body>
  <script>
    var lis = document.querySelectorAll('li')
    var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          if (i.target.id == 'first') {
            first(i)
          } else if (i.target.id == 'last') {
            last(i)
          }
        }
      })
    })

    // 监听第一个
    observer.observe(document.querySelectorAll('li')[0])
    // 监听最后一个
    observer.observe(lis[lis.length - 1])

    function first(val) {
      console.log('first')
    }
    function last() {
      console.log('last')
    }
  </script>
</html>

小案例

<!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>
      * {
        margin: 0;
        padding: 0;
      }
      #box {
        width: 200px;
        height: 200px;
        overflow-y: scroll;
        margin: 20px auto;
      }
      #box li {
        height: 30px;
        width: 100%;
        list-style: none;
        background-image: linear-gradient(#73ffa0, #73ffa0);
        background-repeat: no-repeat;
        background-size: 0% 38%;
        background-position: 0 70%;
      }
      #box li.animate {
        animation: changeBg 1s ease-in-out forwards;
      }
      @keyframes changeBg {
        to {
          background-size: 100% 38%;
        }
      }
    </style>
  </head>
  <body>
    <ul id="box">
      <li id="first">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li id="last">20</li>
    </ul>
  </body>
  <script>
    var lis = document.querySelectorAll('li')
    var observer = new IntersectionObserver((entries, observe) => {
      entries.forEach((i) => {
        // 通过滚动判断是否是当前的监听对象
        if (i.isIntersecting) {
          i.target.classList.add('animate')
          observer.unobserve(i.target)
        }
      })
    })
    // 遍历所有的
    document.querySelectorAll('li').forEach((i) => {
      observer.observe(i)
    })
  </script>
</html>

希望阅读完之后对您有所帮助。

Hope°

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
观察者（IntersectionObserver API）的基本使用（入门篇）

用法可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver介绍一般情况下监听可视区域或者几个元素的相对可视区域状态都不是很容易，传统方式也特别消耗性能，此时就可以使用到IntersectionObserver。操作操作为监听一个列表的首尾是否进入视窗。定义一个new IntersectionObserver（callback,option）注意：此文档只使用到了callback观察者建造 //观察者建
复制链接

扫一扫