30-seconds-of-code/snippets/getElementsBiggerThanViewport.md

title, tags

title	tags
getElementsBiggerThanViewport	browser,intermediate

Returns an array of HTML elements whose width is larger than that of the viewport's.

• Use HTMLElement.prototype.offsetWidth() to get the width of the document.
• Use Array.prototype.reduce() on the result of document.querySelectorAll() to check the width of all elements in the document.

const getElementsBiggerThanViewport = () => {
  const docWidth = document.documentElement.offsetWidth;
  return [...document.querySelectorAll('*')].reduce((acc, el) => {
    if (el.offsetWidth > docWidth) acc.push(el);
    return acc;
  }, []);
}

getElementsBiggerThanViewport(); // <div id="ultra-wide-item" />