javascript - 如何动态更改 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;
  ...

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