192

Can I use JavaScript to check (irrespective of scrollbars) if an HTML element has overflowed its content? For example, a long div with small, fixed size, the overflow property set to visible, and no scrollbars on the element.

Improve this question
1
  • I don't think this answer is perfect. Sometimes the scrollWidth/clientWidth/offsetWidth are the same even though the text is overflow. This works well in Chrome, but not in IE and Firefox. At last, I tried this answer: stackoverflow.com/questions/7738117/… It's perfect and works well anywhere. So I choose this, maybe you can try, you won't disappoint. Commented Apr 17, 2015 at 2:17

5 Answers 5

Reset to default
282

Normally, you can compare the client[Height|Width] with scroll[Height|Width] in order to detect this... but the values will be the same when overflow is visible. So, a detection routine must account for this:

// Determines if the passed element is overflowing its bounds,
// either vertically or horizontally.
// Will temporarily modify the "overflow" style to detect this
// if necessary.
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;

   el.style.overflow = curOverflow;

   return isOverflowing;
}

Tested in FF3, FF40.0.2, IE6, Chrome 0.2.149.30.

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

11 Comments

I wonder whether this will give a short flicker as the style is briefly changed?
+1. This works on modern browsers (including at least Chrome 40 and other current version browsers from the time of this writing).
Does not work in MS Edge. Sometimes content is not overflowing but clientWidth and scrollWidth differs by 1px.
Will this work for multiple line ellipsis that is achieved via the -webkit-line-clamp? css-tricks.com/line-clampin
@Shog9 - Sorry I meant to say that it is not working for the multiple line ellipsis that is achieved via the -webkit-line-clamp. I am simply doing a comparison of offsetWidth and clientWidth, and the values are the same for both regardless of whether the ellipsis is displayed. Wondering if you or someone else has made this work for multiple line ellipsis.
|
33

Try comparing element.scrollHeight / element.scrollWidth to element.offsetHeight / element.offsetWidth :

if (element.scrollHeight > element.offsetHeight) {
  console.log('element overflows')
}

See MDN docs :

Improve this answer

2 Comments

it looks working in Chrome and Safari
Much better and less verbose than the accepted answer. Also confirmed it works in January 2025 in latest Chrome.
8

Another way is compare the element width with its parent's width:

function checkOverflow(elem) {
    const elemWidth = elem.getBoundingClientRect().width
    const parentWidth = elem.parentElement.getBoundingClientRect().width

    return elemWidth > parentWidth
}
Improve this answer

4 Comments

the child element is usually contained or shrinks to fit the parent element. How do you get around this?
@CWSites if you're talking about images, try to use object-fit: cover;
I'm not asking about images, just a DOM element such as a div or span
Probably is because it was the width or max-width set to 100% or -webkit-fill-available
8

I didn't like any of these, so I wrote this one. Works great!

function isOverflowY(element) {
  return element.scrollHeight != Math.max(element.offsetHeight, element.clientHeight)
}
Improve this answer

Comments

1

With jQuery you could do:

if ( $(".inner-element").prop('scrollHeight') > $(".inner-element").height() ) {

    console.log("element is overflowing");

} else {

    console.log("element is not overflowing");

}

Change to .prop('scrollWidth') and .width() if needed.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.