identify-horizontal-scroll-element.js

/*
 * This script helps identify what element is causing a horizontal scroll.
 * Simply paste this into the console of Chrome, FF, etc...
 * This was from CSS-Tricks back in 2014 but still works like a charm today
 * https://css-tricks.com/findingfixing-unintended-body-overflow/
*/

var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
    rect = all[i].getBoundingClientRect();
    if (rect.right > docWidth || rect.left < 0){
        console.log(all[i]);
        all[i].style.border = '1px solid red';
    }
}

/*
 * Like above, his script helps identify what element inside a iframe that is causing a horizontal scroll.
 * Simply paste this into the console of Chrome, FF, etc...
*/

var frame = document.getElementsByTagName("iframe"); 
frame = frame[0];
frame = (frame.contentWindow || frame.contentDocument);
var all = frame.document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
    rect = all[i].getBoundingClientRect();
    if (rect.right > docWidth || rect.left < 0){
        console.log(all[i]);
        all[i].style.border = '1px solid red';
    }
}