Skip to content

Instantly share code, notes, and snippets.

@Beaglefoot
Last active January 22, 2018 22:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Beaglefoot/73ba60c4acefdf245ce14d6341b620e1 to your computer and use it in GitHub Desktop.
Save Beaglefoot/73ba60c4acefdf245ce14d6341b620e1 to your computer and use it in GitHub Desktop.
Find elements whose width is greater than window.innerWidth, possibly resulting in appearance of horizontal scroll.
// Throw this into dev console and set 'max-width: 100%' for returned list of elements
Array.from(document.querySelectorAll('*')).filter(el => {
if (el.getBoundingClientRect().width > window.innerWidth) return true;
const {
width,
paddingLeft,
paddingRight,
marginLeft,
marginRight
} = getComputedStyle(el);
return [
width,
paddingLeft,
paddingRight,
marginLeft,
marginRight
].reduce((sum, val) => sum + parseInt(val), 0) > window.innerWidth;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment