【JS】原生 js 监测某个 DOM进入可视区

嘤嘤怪呆呆狗

已于 2024-04-08 09:55:39 修改

阅读量476

点赞数 1

分类专栏： js 文章标签： vue js javascript

于 2021-07-16 21:19:32 首次发布

本文链接：https://blog.csdn.net/qq_45634593/article/details/118824285

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

就是这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的

<!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>
    ul li {
      height: 70px;
      margin-top: 20px;
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <ul>
    <li>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>
    <p>我是被检测的DOM</p>
  </ul>

  <script>
    let p = document.querySelector('p')
    // 创建一个监测 对象
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      if (isIntersecting) {
        // isIntersecting 如果这个值 为 true 那就是 DOM 进去 可视区
        // 停止 观察 
        // observer.unobserve(p)
        console.log('P 进入 可视区');
      }
    }, { threshold: 0 })
    // 观察 那个 DOM  开始观察
    observer.observe(p)
  </script>
</body>

</html>

嘤嘤怪呆呆狗

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
【JS】原生 js 监测某个 DOM进入可视区

就是这个 IntersectionObserver 对象， MDN 中有介绍， vue3 版本的 vueuse/core 其实也是根据这个封装的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie.
复制链接

扫一扫