IntersectionObserver设root为null却触发父元素相交，原因何在？

我在探索IntersectionObserver API时，搞不懂root:null选项的工作机制。文档说传入null时，观察者会相对于设备视口监听相交情况，但我的示例里，回调函数却在元素与父元素边界交叉时执行，而非视口。滚动到第二个区域时，控制台显示'second element is intersecting with VIEWPORT'，明明是和父元素相交，这是为什么？

示例代码 #

JavaScript #

const second = document.querySelector('.second');

const options = {
  root: null, // to watch for intersection relative to the device's viewport
  threshold: 1,
};

const callback = (entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log('second element is intersecting with VIEWPORT');
      document.querySelector('.second').style.background = '#2d1176';
    } else {
      console.log('second element is NOT intersecting with VIEWPORT');          
      document.querySelector('.second').style.background = 'red';
    }
    
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

const observer = new IntersectionObserver(callback, options);

observer.observe(second)

CSS #

body {
  background: gray;
}
.wrapper {
  border: 2px solid red;
  margin: 40px;
  height: calc(100vh - 80px);
  overflow-y: scroll;
}

.first,
.second,
.third {
  height: 40vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2d1176;
  border-bottom: 15px solid black;
  color: #fff;
}

.third {
  height: 1000vh;
}

HTML #

<div class="wrapper">
  <section class="first">
    <h1>⬇ First ⬇</h1>
  </section>
  <section class="second">
    <h1>⬇ Second (observable) ⬇</h1>
  </section>
  <section class="third">
    <h1>⬆︎ Third ⬆︎</h1>
  </section>
</div>

问题解析 #

你混淆了浏览器视口和滚动容器可视区域的核心区别：

• 当root: null时，IntersectionObserver的判断逻辑完全基于目标元素与浏览器视口的交集，和父容器的滚动状态没有任何关系。
• 你的.wrapper是带滚动条的容器，但滚动容器只是让内部内容在容器窗口内移动，目标元素.second的实际位置并没有脱离浏览器视口——你看到的“元素与父元素边界交叉”，只是元素在容器滚动窗口内的可见性变化，而非元素与视口的交集变化。
• 回调触发的真实原因是：当你滚动容器时，.second元素与视口的交集比例发生了变化（比如从部分相交变为完全相交，符合threshold: 1的触发条件），所以IntersectionObserver判定它与视口相交。

解决方案：监听元素在父容器内的相交 #

如果想要监听元素在.wrapper这个父容器内的相交情况，只需把root设置为父容器元素即可：

const options = {
  root: document.querySelector('.wrapper'), // 监听与父容器的相交
  threshold: 1,
};

注意：父容器必须设置了overflow: auto/scroll成为滚动容器，同时不能是body/html（因为body/html的滚动等同于视口滚动）。

内容的提问来源于stack exchange，提问作者Jerald