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
    Szymon Soppa Web Developer
    Szymon Soppa Curiosum Founder & CEO

    Read more
    on #curiosum blog

    The little story of Elixir programming language

    The Elixir language, operating on an Erlang machine, is constantly gaining more and more followers. Where can these languages be used? How was Elixir created and what does it have in common with Erlang?

    Top Elixir Learning Media & Resources in 2022

    Regardless of whether you've only just heard of the Elixir programming language and would like to learn it, or if you're a seasoned developer with years of experience, you need adequate learning resources to ensure steady progress in your career - and just equally as important is the need to be up to date with what's new & trending in the functional