2

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?

Community
  • 1
  • 1
slolife
  • 19,520
  • 20
  • 78
  • 121
  • Do you have an example of an overflowing element where content is above the top of the parent? The only scenario I can think of would be an element with overflow:auto where a user has scrolled the content... – Shog9 Jan 07 '10 at 22:00
  • Yes, overflow:auto is what I am using. So when scrolled, the content can be hidden above and below, both or none the containing element. See my answer below. – slolife Jan 07 '10 at 22:24
  • @Shog9, I have a scenario where we are scrolling content but we don't want to use scrollbars, but instead normal (and prettier) arrows. – trysis May 04 '15 at 20:43

2 Answers2

5

You can combine scrollLeft and scrollTop with Shog's answer.

Specifically:

// Author: Shog9
// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
// Modified to check if the user has scrolled right or down.
function checkOverflow(el)
{
   var curOverflow = el.style.overflow;
   if ( !curOverflow || curOverflow === "visible" )
      el.style.overflow = "hidden";

   var isOverflowing = el.clientWidth < el.scrollWidth 
      || el.clientHeight < el.scrollHeight;

   // check scroll location
   var isScrolledRight = el.scrollLeft > 0;
   var isScrolledDown = el.scrollTop > 0;

   el.style.overflow = curOverflow;

   return isOverflowing;
}
Joel
  • 19,175
  • 2
  • 63
  • 83
  • Thank Joel, your code helped me figure out what I needed to do, but since isScrolledRight and isScrolledDown aren't returned from this function, I can't use the code as is. – slolife Jan 08 '10 at 17:03
  • The code is easily modified to return an object or offer a set of functions as I see you have already done. – Joel Jan 08 '10 at 20:09
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.

slolife
  • 19,520
  • 20
  • 78
  • 121