Skip to content

Instantly share code, notes, and snippets.

@Ronkiro
Last active March 10, 2021 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Ronkiro/eccc6a6b3f61e694ddc08e77fd75b3e9 to your computer and use it in GitHub Desktop.
Save Ronkiro/eccc6a6b3f61e694ddc08e77fd75b3e9 to your computer and use it in GitHub Desktop.
Detect scroll overflow
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
************* OR
var all = document.getElementsByTagName("*"), i = 0, rect, docWidth = document.documentElement.offsetWidth;
for (; i < all.length; i++) {
rect = all[i].getBoundingClientRect();
if (rect.right > docWidth || rect.left < 0){
console.log(all[i]);
all[i].style.borderTop = '1px solid red';
}
}
******* IF DOESN'T WORKS
var frames = document.getElementsByTagName("iframe");
for(var i=0; i < frames.length; i++){
var frame = frames[i];
frame = (frame.contentWindow || frame.contentDocument);
var all = frame.document.getElementsByTagName("*"),rect,
docWidth = document.documentElement.offsetWidth;
for (var j =0; j < all.length; j++) {
rect = all[j].getBoundingClientRect();
if (rect.right > docWidth || rect.left < 0){
console.log(all[j]);
all[j].style.borderTop = '1px solid red';
}
}
}
**************** OR:
javascript:(function(d){var w=d.documentElement.offsetWidth,t=d.createTreeWalker(d.body,NodeFilter.SHOW_ELEMENT),b;while(t.nextNode()){b=t.currentNode.getBoundingClientRect();if(b.right>w||b.left<0){t.currentNode.style.setProperty('outline','1px dotted red','important');console.log(t.currentNode);}};}(document));
********* CREDITS:
https://stackoverflow.com/questions/31458477/find-element-that-is-causing-the-showing-of-horizontal-scrollbar-in-google-chrom
https://css-tricks.com/findingfixing-unintended-body-overflow/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment