IntersectionObserver：rootMargin 如何工作？

Question

当目标元素距离交集根 100px 时，我想截取一个交集

为了做到这一点，我已经将 rootMargin 设置为“100px 0px 100px 0px”。

在这个例子中，当目标元素（红色框）的第一个像素进入交集根时，交集就变成了

我希望当目标元素距交叉根（灰色区域）100px 时，intersetion 变为

    var io = new IntersectionObserver(function(entries){
      document.getElementById('info').innerHTML =  entries[0].isIntersecting ? 'isIntersecting = true' : 'isIntersecting = false'; 
    }, {
      rootMargin: '100px 0px 100px 0px'
    });
    io.observe(document.getElementById('target'));

* {
  padding: 0;
  margin: 0;
}

.pad {
  height: 1000px;
}

#target {
  background: rgb(237, 28, 36);
  height: 100px;
  outline: 100px solid rgba(0,0,0,0.2);
}

#info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
}

<div class="pad"></div>
<div id="target"></div>
<div class="pad"></div>
<span id="info">isIntersecting = true</span>

Answer 1

默认情况下，根是一个文档视口，它不是#target 元素的直接祖先。
要使其工作，您必须指定根元素。
根据规格：

注意：rootMargin 仅适用于交集根本身。如果目标元素被交集根以外的祖先剪裁，则该剪裁不受 rootMargin 的影响。

var io = new IntersectionObserver(function(entries) {
  document.getElementById('info').innerHTML = entries[0].isIntersecting ? 'isIntersecting = true' : 'isIntersecting = false';
}, {
  root: document.querySelector('.container'),
  rootMargin: '100px 0px 100px 0px'
});
io.observe(document.getElementById('target'));

* {
  padding: 0;
  margin: 0;
}

.container {
  max-height: 300px;
  overflow-y: scroll;
}

.pad {
  height: 1000px;
}

#target {
  background: rgb(237, 28, 36);
  height: 100px;
  outline: 100px solid rgba(0, 0, 0, 0.2);
}

#info {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
}

<div class="container">
  <div class="pad"></div>
  <div id="target"></div>
  <div class="pad"></div>
</div>
<span id="info">isIntersecting = true</span>

检查这个小提琴