CSS overflows are an annoyance that keep showing up once in a while and are really hard to debug. Unwanted and unexpected scrollbars can lead to hours of inspecting the DOM to figure out what element is causing the issue and clicking random elements in the Chrome dev tools until you find the culprit.
A simple programmatic way of figuring out what is causing the issue can be:
document.querySelectorAll('*').forEach(elem => {
if (elem.offsetWidth > document.documentElement.offsetWidth) {
console.log('Problem child: ', elem);
}
});
JavaScriptThis will log all the elements that have an offset width greater than the document’s width and then conveniently decide what to do with it!
While working on a project, I wanted to do an integrity check of a file…
Popovers have been a problem that was typically solved by using a third-party solution. But…
Node.js 20.6 added built-in support for the .env file. This is an excellent addition to the platform…
Object destructuring is a powerful ES 6 feature that can help developers write cleaner code.…
Have you felt particularly annoyed by the time it takes to clone a large repository,…
Within a React or Next.js app, if you encounter the error "Hydration failed because the…
View Comments
Your script doesn't work because 'el' is undefined
Thanks for pointing that out, fixed!