title: How do I tell when the top or bottom of an element scrolls to the top of the page using vanilla javascript
body: <p>I have a web page with two 100% height divs like this...</p>
  <pre><code>&lt;style&gt;
          html, body{
              height: 100%;
              width: 100%;
              margin: 0;
              overflow: hidden;
          }
          #wrapper{
              height:100%;
              width:100%;
              overflow: auto;
          }
          .scroll-item{
              height: 100%;
              width: 100%;
          }
  &lt;/style&gt;
  ...
  &lt;body&gt;
      &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&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Now I want to &quot;select&quot; the one that is currently scrolled to. This means that the top of the element has reached the top of the browser but the bottom has not. This is where I am getting confused here is the JS...</p>
  <pre><code>&lt;script type=&quot;module&quot;&gt;
          const body = document.getElementsByTagName(&quot;body&quot;)[0];
          const handleScroll = function(info){
              const items = body.getElementsByClassName(&quot;scroll-item&quot;);
              for(let i = 0; i &lt; length; i++){
                  const item = items[i];
                  // TODO How do I tell if it is there
              }
          }
          body.addEventListener(&quot;wheel&quot;,handleScroll);
  &lt;/script&gt;
  </code></pre>
  <p>I have tried using the bounding box but I cannot figure out how to get that to work correctly.</p>
  <p>How do I tell when the top or bottom of the element reaches the top of the browser (given possible offset for navbar)?</p>