素材菌前端开发 2021-09-06

使用IntersectionObserver的rootMargin要注意了

rootMargin 设置不一定会有效，有效的几个情况如下：

1.设置了 overflow 的父级节点+rootMargin，如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>测试 IntersectionObserver</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        /* overflow-x: auto; */
      }
      .container {
        margin: auto;
        width: calc(100% - 100px);
        height: 500px;
        border: 1px solid red;
        overflow-x: auto;
      }
      .list {
        width: 200vw;
        height: 500px;
        border: 1px solid blue;
        box-sizing: border-box;
        padding-left: 100px;
      }
      .listItem {
        width: 100px;
        height: 100px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="container" id="container">
      <div class="list" id="list">
        <div class="listItem" id="listItem"></div>
      </div>
    </div>
    <script>
      let callback = (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("出现");
          } else {
            console.log("消失");
          }
        });
      };
      let options = {
        root: document.querySelector("#container"), // root 为 container 时 rootmargin 生效
        // root: null, // root 为 null 时 rootmargin 不生效
        rootMargin: "0px 50px",
        threshold: 0,
      };

      let observer = new IntersectionObserver(callback, options);
      let target = document.querySelector("#listItem");
      observer.observe(target);
    </script>
  </body>
</html>

2.如果不设置 root，即想要交叉对象是窗口的时候，需要去除滚动的父级节点，将 html、body 的 overflow 也去除（也去除的意思是不要设置），如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>测试 IntersectionObserver</title>

    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .container {
        margin: auto;
        width: calc(100% - 100px);
        height: 500px;
        border: 1px solid red;
        overflow-x: auto;
      }
      .list {
        width: 200vw;
        height: 500px;
        border: 1px solid blue;
        box-sizing: border-box;
        padding-left: 100px;
      }
      .listItem {
        width: 100px;
        height: 100px;
        background: white;
      }
    </style>
  </head>
  <body>
    <div class="list" id="list">
      <div class="listItem" id="listItem"></div>
    </div>
    <script>
      let callback = (entries, observer) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            console.log("出现");
          } else {
            console.log("消失");
          }
        });
      };
      let options = {
        root: null, // root 为 null 时 rootmargin 不生效
        rootMargin: "0px 50px",
        threshold: 0,
      };

      let observer = new IntersectionObserver(callback, options);
      let target = document.querySelector("#listItem");
      observer.observe(target);
    </script>
  </body>
</html>

3.如果不需要 rootMargin 或者 rootMargin 为 0，那都是可以的，不需要额外的注意。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！