scrollHeight, scrollTop, and outerHeight: Making sense of JavaScript scrolling geometry with JQuery
Posted 04 Feb 2010 - Andrew Kurtz & James Pozdena
Intro
This article is written for those who find themselves working on two problems:
- Getting information about the scrolling state of an html element.
- Using JavaScript to do so.
Your main foe here is history, as years and years of cruft and backwards compatibility support have all been patiently building up to the tangle that is this moment. Your enemies have gathered, and they will take great strength to overcome.
My methods will require JQuery (1.4 is the current release, but this should apply to many versions). Take a moment to go get it and include it in your project.
Info
To conquer scrolling, learn the difference between these three different scroll state values (see illustration below):
- element.scrollHeight:
a plain javascript attribute, note the lack of parenthesis. The entire scrollable height of the element (in pixels, floating point) - JQuery.outerHeight():
JQuery method of a scrollable element. The height of the visible portion of the scrollable element (in pixels, floating point) - JQuery.scrollTop():
JQuery method of a scrollable element. The height of the invisible portion of the element above the current scrolled area. Effectively, this is the offset of the scrollbar from top. (in pixels, floating point)
bq.
