Skip to content

Instantly share code, notes, and snippets.

@Kolobok12309
Last active September 28, 2020 09:49
Show Gist options
  • Save Kolobok12309/75fbc55cbeeece3aa021d4d919d6d3e1 to your computer and use it in GitHub Desktop.
Save Kolobok12309/75fbc55cbeeece3aa021d4d919d6d3e1 to your computer and use it in GitHub Desktop.
Checker for overflowed elements on page
function styleReverter(elem, style, value) {
const valueBefore = elem.style[style];
elem.style[style] = value;
return () => {
elem.style[style] = valueBefore;
}
}
function testOverflow(elem) {
const styles = window.getComputedStyle(elem);
const overflowX = styles.overflowX;
if (overflowX !== 'visible') return false;
const windowWidthBefore = window.innerWidth;
if (styles.display !== 'none') {
const displayReverter = styleReverter(elem, 'display', 'none');
const isResized = windowWidthBefore !== window.innerWidth;
displayReverter();
return isResized;
}
}
function iterateOverflowDom(elem = document.body) {
const isOverflowed = testOverflow(elem);
if (!isOverflowed) return [];
const childs = [...elem.childNodes];
const result = childs.reduce((acc, elem) => {
if (elem.nodeType !== 1) return acc;
return acc.concat(iterateOverflowDom(elem));
}, []);
if (result.length === 0) {
return [elem]
};
return result;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment