How to determine if hidden/overflow text is at top or bottom of element

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?

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
– Shog9, Commented Jan 7, 2010 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
– slolife, Commented Jan 7, 2010 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
– trysis, Commented May 4, 2015 at 20:43

Joel · Accepted Answer · 2010-01-07 22:00:18Z

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;
}

answered Jan 7, 2010 at 22:00

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

slolife Over a year ago

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.

Joel Over a year ago

The code is easily modified to return an object or offer a set of functions as I see you have already done.

slolife · Accepted Answer · 2010-01-07 22:23:47Z

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.

answered Jan 7, 2010 at 22:23

slolife

19.9k20 gold badges80 silver badges126 bronze badges

Collectives™ on Stack Overflow

How to determine if hidden/overflow text is at top or bottom of element

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related