如何动态更改Intersection Observer的配置

Question

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

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

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

将分配它的属性:

observer.rootMargin = '0px';

但是似乎没有用.

有可能以及如何改变曾经创建过的交叉观察者的行为？

Answer 1

你不能,属性是readonly.

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

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