配置 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>

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

Configure IntersectionObserver to change value of *.isIntersecting based on X pixels

javascript

polyfills

ecmascript-6

intersection-observer

更新