如何动态更改 Intersection Observer 的配置

Question

我的页面上有一个部分，当用户滚动到该部分时，会触发一个事件。该解决方案使用 IntersectionObserver 非常适合我的需要。但是，当使用已经存在时，我想调整此观察者 rootMargin 的大小。

现在有这样一个观察者时最简单的方法：

const options = { rootMargin: '20px' };
let observer = new IntersectionObserver(callback, options);

就是赋值给它的属性：

observer.rootMargin = '0px';

但这似乎不起作用。

是否可能以及如何更改已创建的 Intersection Observer 的行为？

Answer 1

你不能，属性是只读的。

interface IntersectionObserver {
  readonly attribute Element? root;
  readonly attribute DOMString rootMargin;
  readonly attribute FrozenArray<double> thresholds;
  ...

你应该用一个新的替换旧的观察器。也许复制旧的选项并设置你需要的。

如何动态更改 Intersection Observer 的配置

How to dynamically change Intersection Observer's configuration

javascript

intersection-observer