How to deal with unwanted horizontal scrollbars

When I code web pages, it sometimes happens with more complex responsive templates that some element overflows the width of the document and causes horizontal scrollbars. I don’t always notice it quickly, because the overflow may only occur at certain widths, and even fixing it can turn into detective work.

Deleting individual nodes until the overflow disappears doesn’t always get you there quickly. The element inspector didn’t always help me either. I also used Firefox and its 3D view mode, which could render the boundaries of all layers in 3D, including the boundaries of the base document. However, this mode has since been removed from Firefox, so I had no choice but to look for another solution.

On CSS-Tricks I found a great article https://css-tricks.com/findingfixing-unintended-body-overflow/ with a handy snippet that, once pasted into the console, finds all the culprits and prints them in a list.

var docWidth = document.documentElement.offsetWidth;

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

If you run into a similar problem from time to time, give this a try too. If it helps you, enjoy :-)