Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

Detect CSS Overflow Elements

By David Walsh on April 8, 2021

Every once in a while you encounter a CSS annoyance that takes some cleverness to discover. One such case rears its ugly head in unwanted and unexpected scrollbars. When I see unwanted scrollbars, I usually open developer tools, click the element inspector, and hover around until I find the villainous HTML element. As a visual person, I find that process effective but not efficient. Recently I was made aware of a programmatic way to find the scoundrel element with JavaScript!

To find the element summoning demon scrollbars, you can use the following JavaScript:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
      console.log('Found the worst element ever: ', el);
  }
});

After the element has been logged to the console, you can pinpoint it and play with punishments in the element inspector as you see fit.

I'm always guilty of reverting to my old ways, i.e. visual inspection, but having a programmatic solution is so much faster and convenient!

Recent Features

By David WalshFebruary 18, 2013
Create a Sheen Logo Effect with CSS
I was inspired when I first saw Addy Osmani's original ShineTime blog post. The hover sheen effect is simple but awesome. When I started my blog redesign, I really wanted to use a sheen effect with my logo. Using two HTML elements and...
By David WalshSeptember 3, 2014
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

Incredible Demos

By David WalshOctober 14, 2009
Save Web Form Content Using Control + S
We've all used word processing applications like Microsoft Word and if there's one thing they've taught you it's that you need to save every few seconds in anticipation of the inevitable crash. WordPress has mimicked this functionality within their WYSIWYG editor and I use it...
By David WalshDecember 29, 2011
CSS Circles
A while back I shared a clever technique for creating triangles with only CSS. Over the past year, I've found CSS triangles incredibly effective, especially when looking to create tooltips or design elements with a likewise pointer pattern. There's another common shape...

Discussion

Craig
Great little script… To make it easy to use, I ended up creating a Bookmarklet with a slightly modified version of that script. Then I can run it easily on any page.
Gregor
Firefox Developer edition (not sure about the normal one) also has an indicator on the HTML element that is causing the overflow
Sagive
Still didn’t help me to find the colporate for some reason… also tried the * {border: 1px solid red} trick to try to identify whats happening (tears!) – ended up just overflow-x hidden – which is lazy i guess

But.. thanks for sharing. gr8 logic that little script

Sean
I’m not sure it will help in your particular case, using outline instead of border can be a good shout, it won’t add to the width of elements (when border-box is not used)

Antonio

Maybe you want to say…

if (el.scrollWidth > document.documentElement.offsetWidth)

Thanks for sharing

Antonio
But you must to take account of margins, etc.
Antonio
This line works better for me:
```
if (el.scrollWidth > el.clientWidth)
```
Detection includes cases where no scrollbar is showed but something wrong is happening.

Thanks David for inspiring us.

Detect CSS Overflow Elements

Recent Features

Create a Sheen Logo Effect with CSS

Create a CSS Flipping Animation

Incredible Demos

Save Web Form Content Using Control + S

CSS Circles

Discussion