如何动态更改Intersection Observer的配置

Question

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

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

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

将分配它的属性：

observer.rootMargin = '0px';

但似乎没有效果。

是否可以以及如何更改曾经创建的交叉观察者的行为？

Answer 1

你不能，这些属性是只读的。

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

你应该用新的观察者替换旧的观察者。也许复制旧的选项，只需设置你需要的东西。