Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 15 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save joshwcomeau/215a383add2ef61bb40a8c94318c99c3 to your computer and use it in GitHub Desktop.
Save joshwcomeau/215a383add2ef61bb40a8c94318c99c3 to your computer and use it in GitHub Desktop.
Paste this in your browser console to search for HTML elements which extend past the window's width and create a horizontal scrollbar.
function findBreakoutElem(rootElem = document.body) {
function checkElemWidth(elem) {
if (elem.clientWidth > window.outerWidth) {
console.log("The following element has a larger width than the window's outer width");
console.log(elem);
console.log('<-------------------------------------------------------------------->');
} else if (elem.scrollWidth > window.outerWidth) {
console.log("The following element has a larger width than the window's scroll width");
console.log(elem);
console.log('<-------------------------------------------------------------------->');
}
// Recursively check all the children
// of the element to find the culprit.
[...elem.children].forEach(checkElemWidth);
}
checkElemWidth(rootElem);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment