原生 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="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <style>
    ul li {
      height: 70px;
      margin-top: 20px;
      background-color: #ccc;
    }
  style>
head>

<body>
  <ul>
    <li>1li>
    <li>2li>
    <li>3li>
    <li>4li>
    <li>5li>
    <li>6li>
    <li>7li>
    <li>8li>
    <li>9li>
    <li>10li>
    <li>11li>
    <li>12li>
    <li>13li>
    <li>14li>
    <li>15li>
    <li>16li>
    <li>17li>
    <li>18li>
    <li>19li>
    <p>我是被检测的DOMp>
  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>

你可能感兴趣的:(js,vue,vue,js,javascript)