Popular:
 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  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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    New MooTools Plugin: ElementFilter

    My new MooTools plugin, ElementFilter, provides a great way for you to allow users to search through the text of any mix of elements. Simply provide a text input box and ElementFilter does the rest of the work. The XHTML I've used a list for this example...

  • By
    Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

    There's nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn't take long for that effort to be rewarded with above-average user retention and...

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

    • 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)

  4. Antonio

    Maybe you want to say…

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

    Thanks for sharing

  5. Antonio

    But you must to take account of margins, etc.

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

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