highlight-oob.js

(function(w, d){
  const style = d.createElement('style');
  style.innerText = ".oob { outline: 1px solid #f00 !important; }";
  d.head.appendChild(style);
  const nodes = d.querySelectorAll("*");

  let vpw = window.innerWidth;
  
  w.addEventListener('resize', resize)
  let timer;
  function resize(){
    w.clearTimeout(timer)
    timer = w.setTimeout(detect, 400)
  }
  function detect() {
    vpw = window.innerWidth;
    nodes.forEach(el => {
      if((el.scrollWidth > vpw || (el.scrollWidth + el.scrollLeft) > vpw) && el.className.indexOf("oob") === -1) {
        el.className += " oob"
        console.log(el)
      } else if( (el.scrollWidth <= vpw && (el.scrollWidth + el.scrollLeft) <= vpw) && el.className.indexOf("oob") !== -1 ) {
        el.className = el.className.replace(/\s?oob/, '')
      }
    })
  }
  detect();

})(window, document)