What is scrollTop and scrollHeight

Question

What is scrollTop and scrollHeight in HTML elements.

I added a function

function fnCheckScroll(){   
    var iNewHeight = oDiv.scrollHeight;
    var iscrolTop = oDiv.scrollTop; 
    alert("The value of the scrollHeight property is: "  + iNewHeight + "px"); 
    alert("The value of the scrollTop property is: " + iscrolTop + "px");        
}

<div id="oDiv" style="overflow: scroll; height= 100px; width= 250px; text-align: left">
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
Hello<br>
</div>

I checked in ie8. Always

The value of the scrollTop property is: 0 - returns 0 for scrollTop (even after scrolling)?

Answer 1

See the MDC articles, scrollTop and scrollHeight. In summary, scrollTop is how much it's currently scrolled, and scrollHeight is the total height, including content scrolled out of view.

Answer 2

If I scroll down 5px in this window, the window's scrollTop value is 5. If I scroll right 10px in a scrollable div, the div's scrollLeft value is 10.

When I scroll to the top left corner of this window, both its scrollTop and scrollLeft values are 0.