title: Why is IntersectionObserver not working for the middle div?
body: <p>I have the following Code...</p>
  <pre><code>&lt;div id=&quot;wrapper&quot;&gt;
      &lt;div id=&quot;test1&quot;
           class=&quot;scroll-item&quot;&gt;Simple Test 1&lt;/div&gt;
      &lt;div id=&quot;test2&quot;
           class=&quot;scroll-item&quot;&gt;Simple Test 2&lt;/div&gt;
      &lt;div id=&quot;test3&quot;
           class=&quot;scroll-item&quot;&gt;Simple Test 3&lt;/div&gt;
  &lt;/div&gt;
  ...
  const onChange = function(changes) {
      changes.forEach(change =&gt; {
          change.intersectionRatio &lt;= 0 ?
              change.target.classList.remove(&quot;selected&quot;):
              change.target.classList.add(&quot;selected&quot;);
      });
  }
  const intersectionObservers = [];
  const body = document.querySelector(&quot;#wrapper&quot;);
  const scrollItems = body
      .querySelectorAll(&quot;.scroll-item&quot;);
  scrollItems.forEach(item=&gt;{
      const intersectionObserver = new IntersectionObserver(onChange, {
          root: body
      });
      intersectionObserver.observe(item);
      intersectionObservers.push(item);
  });
  </code></pre>
  <p>But when I run this I can not get the middle div to get selected. I tried adding a root margin...</p>
  <pre><code>const intersectionObserver = new IntersectionObserver(onChange, {
      root: body,
      rootMargin: &quot;-20px&quot;
  });
  </code></pre>
  <p>This works somewhat but has weird behavior. Sometimes two items are selected and test 2 still doesn't seem to get selected correctly. Also if I remove test 3, test2 never works. What am I missing?</p>
  <p>The example I am using is available <a href="https://github.com/jrgleason/rollup-demo/blob/SCROLL_WORK/modules/esm/jrg-site/test2.html" rel="nofollow noreferrer">here</a></p>