title: What does the jQuery scrollTop value mean?
body: <p>I'm working on some jquery code using the scrollTop method to implement an infinite scroll (please, don't suggest jQuery plugins, I know they exist) and I don't quite understand what this value means.</p>
  
  <p>Given this fiddle: <a href="https://jsfiddle.net/ve8s5fdx/" rel="noreferrer">https://jsfiddle.net/ve8s5fdx/</a></p>
  
  <pre><code>&lt;div id="outter"&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
    &lt;div class="inner"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="scroll"&gt;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>#outter {
    height: 100px;
    width: 100%;
    overflow-y:auto;
  }
  
  .inner {
    height: 150px;
    width: 50%;
    border: dashed black 2px;
    background-color: grey;
  }
  </code></pre>
  
  <p>It makes sense that the value is 0 when the scrollbar is at the very top of the element, but why "208" when it's at the bottom ? The <code>#outter</code> div is 100px high, its content a bit more than 300px.</p>