Skip to content

Instantly share code, notes, and snippets.

@cuth
Last active October 18, 2024 08:22
Show Gist options
  • Save cuth/c1ddf2b1ce2fb07e512a to your computer and use it in GitHub Desktop.
Save cuth/c1ddf2b1ce2fb07e512a to your computer and use it in GitHub Desktop.
Find the elements that are causing a horizontal scroll. Based on http://css-tricks.com/findingfixing-unintended-body-overflow/

Debug Horizontal Scroll

(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));

Bookmarklet

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));
@s7ankoff
Copy link

Awesome! Saved my day!

@StanislavJilnicov
Copy link

OMG.... Amazing!!! Thanks a LOT!

@statisrho
Copy link

That was useful ! Thank you !!!

@ChineseNorris
Copy link

MVP

@jakehartigan
Copy link

This helped me fix something... I have no Idea how just kept destroying elements this targeted.

@warmwhisky
Copy link

The bookmarklet has been helping me out for years.

@cuth
Copy link
Author

cuth commented Aug 29, 2021

The bookmarklet has been helping me out for years.

So glad to hear.

@konsalex
Copy link

konsalex commented Oct 5, 2021

Literally spent too much time on the overflow rabbit-hole. Life saver snippet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment