IntersectionObserver：rootMargin 是如何工作的？

Question

我想在目标元素距交点根 100px 时拦截交点

为了成功，我将 rootMargin 设置为“100px 0px 100px 0px”。

在此示例中，当目标元素（红色框）的第一个像素进入交点根时交点变为交点

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

    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 元素的直接祖先。
要使其工作，您必须指定根元素。
根据specification:

Note: rootMargin only applies to the intersection root itself. If a target Element is clipped by an ancestor other than the intersection root, that clipping is unaffected by 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>

勾选这个fiddle

IntersectionObserver：rootMargin 是如何工作的？

IntersectionObserver: how rootMargin work?

javascript

intersection-observer