Find HTML elements which are overflowing the body

That pesky horizontal scrollbar is far too common a site (get it?) across the net. 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 *


2 + = five