181

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.

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.
    – zjalex
    Apr 17, 2015 at 2:17

5 Answers 5

273

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.

11
  • 4
    I wonder whether this will give a short flicker as the style is briefly changed? Nov 22, 2012 at 12:37
  • 3
    +1. This works on modern browsers (including at least Chrome 40 and other current version browsers from the time of this writing).
    – L0j1k
    Feb 27, 2015 at 19:07
  • 1
    Does not work in MS Edge. Sometimes content is not overflowing but clientWidth and scrollWidth differs by 1px.
    – jesper
    Dec 5, 2016 at 12:21
  • 1
    Will this work for multiple line ellipsis that is achieved via the -webkit-line-clamp? css-tricks.com/line-clampin
    – AshD
    Sep 8, 2018 at 3:23
  • 1
    @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.
    – AshD
    Sep 8, 2018 at 4:17
22

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

http://developer.mozilla.org/en/DOM/element.offsetWidth
http://developer.mozilla.org/en/DOM/element.offsetHeight
http://developer.mozilla.org/en/DOM/element.scrollWidth
http://developer.mozilla.org/en/DOM/element.scrollHeight

0
6

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
}
4
  • 3
    the child element is usually contained or shrinks to fit the parent element. How do you get around this?
    – CWSites
    Aug 31, 2021 at 16:41
  • @CWSites if you're talking about images, try to use object-fit: cover;
    – Alynva
    Sep 4, 2021 at 12:28
  • 1
    I'm not asking about images, just a DOM element such as a div or span
    – CWSites
    Sep 7, 2021 at 2:33
  • Probably is because it was the width or max-width set to 100% or -webkit-fill-available
    – Alynva
    Jan 6, 2022 at 4:19
4

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)
}
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.

Your Answer

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