2

通过使用 Vanilla JavaScript 如何在向下滚动页面时检测部分 ID？

例子alert('this is section one');

    <ul id="menu-item">
     <li class="nav-link">
      <a href="#section1">section 1</a>
       </li>
       <li class="nav-link">
        <a href="#section2">section 2</a>
        </li>
         </ul>
         <body>
          <section id="section1">
           "Lorem ipsum dolorsitamet,consectetur 
            adipiscing elit, sed doeiusmodtempor 
            incididunt ut laboreetdoloremagnaaliqua".
            </section>
               <section id="section2">
               "Lorem ipsum dolorsitamet,consectetur 
                adipiscing elit, sed doeiusmodtempor 
              incididuntutlaboreetdoloremagnaaliqua".
            </section>
     <script>
    /**
    *javascript codes to detect section id as the page 
     *scrolled down 
    *example alert('this is section one');
    */
    </script>
4

1 回答 1

2

您可以这样做来检测特定 id 上的滚动（它也适用于类）。

一个 id/class 的示例

<script>
  const target = document.querySelector("#section1");

  function callback(entries) {
    alert("this is section one");
  }

  const observer = new IntersectionObserver(callback);

  observer.observe(target);
</script>

处理多个 ids/classes 的示例

<script>
  const targets = document.querySelectorAll("#section1, #section3");

  function callback(entries) {
    entries.map((entry) => {
      console.log("this is " + entry.target.id);
    });
  }

  targets.forEach((target) => {
    new IntersectionObserver(callback).observe(target);
  });
</script>

来源：

MDN 网络文档 -> https://developer.mozilla.org/fr/docs/Web/API/Intersection_Observer_API

于 2021-07-27T09:56:27.910 回答