How to find DOM elements that cause body overflow

Sometimes you may notice that your website displays an unintended horizontal scrollbar. You may be wondering what is the cause.

Table of contents

    Most often this issue is caused by the DOM element being wider than a document.

    You can try to find this element in the web inspector, but there is a great and easy JS solution that will console log all elements that go beyond the screen:

    var docWidth = document.documentElement.offsetWidth;
    
    [].forEach.call(
      document.querySelectorAll('*'),
      function(el) {
        if (el.offsetWidth > docWidth) {
          console.log(el);
        }
      }
    );

    That's it, no need to waste your time searching for overflowed elements anymore!

    Download our ebook
    Sign to our Newsletter
    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog