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!

    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog