Check if an element has overflow

True when the content is larger than the element’s visible box.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function hasOverflow(element) { return element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth; }

Usage

Markup

<div id="box" style="height: 40px; overflow: hidden"><p style="height: 100px; margin: 0">Long content</p></div>
<div id="roomy" style="height: 200px"><p style="margin: 0">Short</p></div>

Script

hasOverflow(document.querySelector('#box')); // → true
hasOverflow(document.querySelector('#roomy')); // → false

Lines marked → were executed in headless Chromium against the markup above, and each result was compared with the value shown. Lines marked e.g. are illustrative.

Know the limits

• Compares content size with the visible box, whatever the overflow style: use it to decide whether to show a “Show more” control.
• The sizes are rounded to integers, so sub-pixel overflow is missed. Elements with display: none report 0 for both.

The function above is the code the usage lines run. It does not validate its arguments; add checks where it receives untrusted input.

Keep exploring

• Check if a given DOMRect is contained within another DOMRect — True when the target lies inside the container or on its edges.
• Check if two DOMRects intersect — Two rects intersect when they meet on both axes.
• Compare two DOMRects for size and position match — Compare x, y, width and height exactly.