How to find DOM elements that cause body overflow
1 min read
1 Sep 2022 (created at 10 Jan 2021)
Sometimes you may notice that your website displays an unintended horizontal scrollbar. You may be wondering what is the cause.
Table of contents
Most often this issue is caused by the DOM element being wider than a document.
You can try to find this element in the web inspector, but there is a great and easy JS solution that will console log all elements that go beyond the screen:
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);That's it, no need to waste your time searching for overflowed elements anymore!
