Check if an element's content is overflowing?

javascript

overflow-detection

responsive-design

ui-alterations

byNikita Barsukov·Feb 1, 2025

Use clientWidth, clientHeight, scrollWidth, and scrollHeight properties to efficiently detect overflow within an element:

// `el` care to share some scroll secrets? 👀
const isOverflowing = el => el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight;

Use this handy function like this:

console.log(isOverflowing(document.querySelector('.my-element')) ? 'Spill Alert! 🌊' : 'All Clear 🌈');

To keep the performance snappy with dynamic content, apply the concept of debouncing to limit the frequency of function calls, especially with events like resize or scroll.

Main sections for seamless overflow management

Function for overflow detection

Craft a universally applicable function like isOverflown to sniff out overflow across different elements. Not only does it make your code DRY, it turns you into an overflow detective 🕵️‍♂️.

const isOverflown = element => (element.scrollHeight > element.clientHeight) || (element.scrollWidth > element.clientWidth);

Array.from(document.querySelectorAll('.might-overflow')).forEach(el => {
  console.log(isOverflown(el) ? `Element ${el.id} is overflowing 🌊` : `Element ${el.id} is dry 👍`);
});

Adapting to dynamic content changes

To handle contents changing like a quicksilver in real-time, use event listeners for DOM events such as resize or mutation:

// "Hey window, mind letting me know every time you change size? It's for... science."
window.addEventListener('resize', () =>  {
  Array.from(document.querySelectorAll('.might-overflow')).forEach(el => {
    toggleMoreButton(el, isOverflowing(el));   // Give the "more" button its well-deserved spotlight!
  });
});

Overflow indicators through CSS

User experience is the key 🔑. Implement visual hints for users to spot overflows. Sometimes, a simple trick of changing border color or adding a shadow can be your magic wand 🧙‍♀️.

.might-overflow { border: 2px solid black; }
.overflowing { border-color: red; /* Red Alert 🚨 There's an overflow */ }

Then use JavaScript to apply these classes where needed:

isOverflown(element) ? element.classList.add('overflowing') : element.classList.remove('overflowing');

Dive into detailed overflow handling

Visual aids for overflow

Spice up your UI using scrolling shadows or set background-attachment to local with a CSS gradient to indicate overflow:

.might-overflow {
    background-attachment: local, scroll, scroll;
}

Put the lid on with CSS

Prevent content from partying out of control (in other words, expanding grid items) by using CSS grid layout and applying a hard cap with max-height backed by the overflow property.

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); // Party grid ready!
    gap: 10px;
}
.grid-item {
    max-height: 300px; // Ceiling level set! 🙌
    overflow: auto; // If you can't fit in, become a scroll! 📜
}

Unlock dynamic UI alterations

When your content goes beyond the horizon, add a 'more' button or similar teasing GUI.

const toggleMoreButton = (el, isOverflowing) => {
    const moreButton = el.querySelector(".more-button");
    moreButton.style.display = isOverflowing ? 'block' : 'none';
};