Force IntersectionObserver update : <p>Is there any way to force an update/run of an <code>IntersectionObserver</code> instance? The callback will be executed by default, when the viewport has changed. But I'm looking for a way to to execute it when other events happen, like a change of elements.</p>

<p>An Example:</p>

<p>On initialization everything works as expected. But when you change the position of the <code>#red</code> element, nothing happens.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// elements
let green = document.querySelector('#green');
let red = document.querySelector('#red');

// observer callback
let callback = entries =&gt; {
  entries.forEach(entry =&gt; {
    let isInside = entry.intersectionRatio &gt;= 1 ? "fully" : "NOT";
    console.log("#" + entry.target.id + " is " + isInside + " inside #container");
  });
};

// start observer
let options = {root: document.querySelector('#container')};
let observer = new IntersectionObserver(callback, options);
observer.observe(green);
observer.observe(red);

// button action
document.querySelector('button').addEventListener('click', () =&gt; {
  red.style.right = red.style.right == "" ? "0px" : "";
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
}

#green, #red {
  width: 50px;
  height: 50px;
  background: green;
  position: absolute;
}

#red {
  background: red;
  right: -10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;move #red&lt;/button&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;div id="container"&gt;
  &lt;div id="green"&gt;&lt;/div&gt;
  &lt;div id="red"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Is there any way to make this working? Only thing that would work is to <code>unobserve</code> the element and start <code>observing</code> it again. This may be work for an single element, but not if the Observer has hundreds of elements to watch.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// elements
let green = document.querySelector('#green');
let red = document.querySelector('#red');

// observer callback
let callback = entries =&gt; {
  entries.forEach(entry =&gt; {
    let isInside = entry.intersectionRatio &gt;= 1 ? "fully" : "NOT";
    console.log("#" + entry.target.id + " is " + isInside + " inside #container");
  });
};

// start observer
let options = {root: document.querySelector('#container')};
let observer = new IntersectionObserver(callback, options);
observer.observe(green);
observer.observe(red);

// button action
document.querySelector('button').addEventListener('click', () =&gt; {
  red.style.right = red.style.right == "" ? "0px" : "";
  observer.unobserve(red);
  observer.observe(red);
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
}

#green, #red {
  width: 50px;
  height: 50px;
  background: green;
  position: absolute;
}

#red {
  background: red;
  right: -10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button&gt;move #red&lt;/button&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;div id="container"&gt;
  &lt;div id="green"&gt;&lt;/div&gt;
  &lt;div id="red"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>
