title: Scroll.top is returning 0 but I can scroll in the element
body: <p>Hi there I'am trying to call a action on scroll and I want to activate the function if you scrolled past the element.</p>
  <p>If I console.log it it will return 0 while i can scroll in the element.</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>function scroll(){
      let element = document.getElementById("i");
     let elementcontainer = document.getElementById("phone3")
      console.log(elementcontainer.scrollTop);
  
    
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.phone3 {
      position: relative;
      height: 550vh;
      width: 100%;
  
      .container {
          height: 100vh;
          width: 100%;
          position: sticky;
          top: 0;
          #i {
              transition: ease 0.05s;
              height: 100vh;
              width: 100vw;
              top: 0;
              right: 0;
          }
      }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;script&gt;
      window.onscroll = scroll;
  &lt;/script&gt;
     &lt;div id="phone3" class="phone3"&gt;
          &lt;div id="container" class="container"&gt;
              &lt;div id="i"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>