title: Avoid to consider intersecting on the edge using IntersectionObserver
body: <p>I have sequentially divs with height 100vh, I want to know which of them are visible on the viewport.</p>
  <p>I'm using <code>IntersectionObserver</code> and it console when isIntersecting is true.</p>
  <p>In the example second div is consoled as fired, but this one is hide for the viewport (is on the edge), when I add <code>margin-top: 1px</code> is not consoled. ¿Why this behaivour?</p>
  <p>fiddle -&gt; <a href="https://jsfiddle.net/hansfelix50/L42n3jte/" rel="nofollow noreferrer">https://jsfiddle.net/hansfelix50/L42n3jte/</a>
  <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>const options = {
    root: null,
    rootMargin: '0px',
    threshold: 0
  }
  
  const sectionObserverHandler = (entries) =&gt; {
    for (const entry of entries) {
      if (entry.isIntersecting) {
        console.log(`${entry.target.className} is visible.`)
      }
    }
  }
  
  this.sectionObserver = new IntersectionObserver(
    sectionObserverHandler,
    options
  )
  
  // Observe each section
  const sections = document.querySelectorAll('.step')
  sections.forEach((section) =&gt; {
    this.sectionObserver.observe(section)
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0px
  }
  
  .step1 {
    background: red;
    height: 100vh
  }
  
  .step2 {
    /*margin-top: 1px;*/
    background: blue;
    height: 100vh
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="step step1"&gt;&lt;/div&gt;
  &lt;div class="step step2"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>