Detect CSS Overflow Elements

By  on  

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
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

Incredible Demos

Discussion

  1. 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.

  2. Gregor

    Firefox Developer edition (not sure about the normal one) also has an indicator on the HTML element that is causing the overflow

  3. 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

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!