Find elements that cause horizontal scrolling

find-elements-causing-horizontal-scrolling.js

/*
Paste this in JS console or create a bookmarklet to find which elements cause a horizontal scroll on the page.
Correctly detects even elements that are hidden by css tricks (e.g. clip property).
Requires jQuery but could probably be optimized to work without it with modest effort.
*/
(function() {
  var mainSelector = prompt(
    'Selector under which to search',
    'body'
  );
  var windowWidth = prompt('Window width', String(window.innerWidth));
  windowWidth = parseInt(windowWidth);
  if(isNaN(windowWidth)) {
    alert('Enter valid window width');
    return;
  }
  console.log('Finding visible elements under ' + mainSelector + ' where the position of right edge is over ' + windowWidth);
  var num = 0;
  $(mainSelector).find('*').each(function () {
    var $this = $(this);
    var outerWidth = $this.outerWidth(true);
    var offset = $this.offset();
    var right = offset.left + outerWidth;
    var visible = $this.is(':visible');
    if (visible && right > windowWidth) {
      console.log($this[0], right);
      num++;
    }
  });

  alert('Found ' + num + ' elements. See javascript console');
}());