Note on the use of rootMargin of IntersectionObserver

The rootMargin setting may not be effective. The effective cases are as follows
1. The parent node + rootMargin of overflow is set, as follows

<!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. If you do not set root, that is, when you want the cross object to be a window, you need to remove the scrolling parent node, and also remove the overflow of html and body (also removing means not to set), as follows

<!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. If you do not need rootMargin or rootMargin is 0, it is ok, no extra attention is needed

Note on the use of rootMargin of IntersectionObserver

羊羊羊

引用和评论

ios上loadedmetadata 事件在用户播放时才触发导致audio duration获取不到的问题

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高