配置 IntersectionObserver 以根据 X 像素更改 *.isIntersecting 的值

Question

我有交点观察者对象，它可以工作，但我希望它在某个元素超过或位于交点底部 100 像素时通知我。

使用默认配置，一旦元素完全在视图中，它只会更改 .isIntersection 的值。但是当元素在视口上方或下方 100 像素时，我想做一些事情。

这是我的代码：

var iObserver = new IntersectionObserver(function(element) {
  console.log('elementi', element); // I want to trigger here when elementi is 100px or less of distance to the viewport.
});

var el;
for (var i = 0; i < elements.length; i++) {
  el = elements[i];
  console.log('eli', el);
  iObserver.observe(el);
}

更新

感谢用户的回答我使用了这个并且它有效：

var iObserver = new IntersectionObserver(function(entryEvent) {
 //...
}, {'rootMargin': '100px 0px 100px 0px'});

Answer 1

您可以在传递给观察者的选项中定义rootMargin 顶部和底部。

在演示中，悬停红色矩形，当它与.container 的距离达到10px 时，调用观察者：

const options = {
  root: document.querySelector('.container'),
  rootMargin: '10px 0px 10px 0px',
};

let i = 0;

const iObserver = new IntersectionObserver((entries) => console.log(`intersection ${i++}`), options);

iObserver.observe(document.querySelector('.element'));

.container {
  position: relative;
  height: 20px;
  background: lightblue;
}

.element {
  position: absolute;
  top: calc(100% + 30px);
  height: 100px;
  width: 100px;
  background: red;
  margin-bottom: 20px;
  transition: top 5s;
}

.element:hover {
  top: calc(100% - 30px);
}

.as-console-wrapper {
  height: 50px;
}

<div class="container">
  <div class="element">1</div>
</div>