How to dynamically change Intersection Observer's configuration

Question

I have a section on my page to which when user scrolls, an event fires. The solution uses IntersectionObserver which is perfect for my need. However, I would like to adapt the size of rootMargin of this observer, when the uses is already there.

Now the simplest approach when having an observer like this:

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

would be to assign the properties of it:

observer.rootMargin = '0px';

But is doesn't seem to work.

Is is possible and how to change the behaviour of once created Intersection Observer?

Answer 1

You cannot, the properties are readonly.

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

You should just replace your old observer with a new one. Maybe copy over the old options and just set what you need.