Question

I’d like to expand on Shog9’s answer in

How to determine from javascript if an html element has overflowing content

And I’d like to know if the text that is hidden is at the top or at the bottom (or both or none) of the containing element.

What’s the best way to go about that?

Answer 1

I could not see the forest through the trees. Joel’s code snippet var isScrolledDown = el.scrollTop > 0; made me realize how to do it. I used two functions:

function HasTopOverflow(el) {
   return el.scrollTop;
}

function HasBottomOverflow(el) {
   var scrollTop = el.scrollTop,
       clientHeight = el.clientHeight,
       scrollHeight = Math.max(el.scrollHeight, clientHeight);

   return (scrollTop + clientHeight) < scrollHeight;
}

Haven’t tested if it’ll work on IE6+ yet, but FF works.

If there are any bugs, please let me know.