Find and highlight DOM elements overflowing the viewport width, causing the horizontal scrollbar to appear.

detect_horizontal_overflow.js

const detectHorizontalOverflow = (root) => {
   root = root || document;
   const { offsetWidth } = document.documentElement;
   let previousOverflowing = null;
   let overflowingCount = 0;
   root.querySelectorAll('*').forEach((el) => {
      const { right } = el.getBoundingClientRect();
      if (right > offsetWidth) {
         // Ignore the children of overflowing elements. The issue is probably their parents.
         if (previousOverflowing === null || !previousOverflowing.contains(el)) {
            console.log('Right edge at %dpx, overflowing %dpx', right, right - offsetWidth, el);
            el.style.opacity = '1';
            el.style.visibility = 'visible';
            el.style.backGroundColor = 'rgba(255,0,0,.3)';
            el.style.outline = '1px solid #f00';
            previousOverflowing = el;
            overflowingCount++;
         }
      }
   });
   return overflowingCount;
};