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.
-
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.– zjalexApr 17, 2015 at 2:17
5 Answers
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.
-
4I 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).– L0j1kFeb 27, 2015 at 19:07
-
1Does not work in MS Edge. Sometimes content is not overflowing but
clientWidth
andscrollWidth
differs by 1px.– jesperDec 5, 2016 at 12:21 -
1Will this work for multiple line ellipsis that is achieved via the -webkit-line-clamp? css-tricks.com/line-clampin– AshDSep 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.– AshDSep 8, 2018 at 4:17
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
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
}
-
3the child element is usually contained or shrinks to fit the parent element. How do you get around this?– CWSitesAug 31, 2021 at 16:41
-
@CWSites if you're talking about images, try to use
object-fit: cover;
– AlynvaSep 4, 2021 at 12:28 -
1
-
Probably is because it was the
width
ormax-width
set to100%
or-webkit-fill-available
– AlynvaJan 6, 2022 at 4:19
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)
}
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.