Find HTML elements which are overflowing the body

That pesky horizontal scrollbar is far too common a site (get it?) across the net (nobody gets my 90s web humour). Find which elements overflow the body (or any other element) of your page by pasting this in your developer console:

var findOverflowingElements = function(node) {
    var nodes = [],
	parentW = node.getBoundingClientRect().width,
    processNode = function(node) {
		if (!(node instanceof HTMLElement)) return;
        if (node.getBoundingClientRect().width > parentW) nodes.push(node);
        for (var child = node.firstChild; child != null; child = child.nextSibling) {   
            processNode(child);
        }
    };
    processNode(node);
    return nodes;
}
findOverflowingElements(document.body);

Leave a Reply

Your email address will not be published. Required fields are marked *

Pass the Wafflin\' Intelligence Test™ *