Check if an element has CSS overflow

True when either axis is styled to scroll: overflow auto or scroll.

JavaScriptBrowser · DOM Version 1.0.0 · MIT · .md

function hasCssOverflow(element) { const { overflowX, overflowY } = getComputedStyle(element); return [overflowX, overflowY].some(value => ['auto', 'scroll'].includes(value)); }

Usage

Markup

<div id="panel" style="overflow-x: hidden; overflow-y: auto; height: 50px"></div>
<div id="plain"></div>

Script

hasCssOverflow(document.querySelector('#panel')); // → true
hasCssOverflow(document.querySelector('#plain')); // → false
getComputedStyle(document.querySelector('#panel')).overflow; // → 'hidden auto'

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

• The original read the overflow shorthand, which is "hidden auto" when the axes differ, as the last line shows; reading overflowX and overflowY handles both.
• This says whether the element would scroll, not whether its content overflows; see Check if an element has overflow.

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.