Detect CSS Overflow Elements
Every once in a while you encounter a CSS annoyance that takes some cleverness to discover. One such case rears its ugly head in unwanted and unexpected scrollbars. When I see unwanted scrollbars, I usually open developer tools, click the element inspector, and hover around until I find the villainous HTML element. As a visual person, I find that process effective but not efficient. Recently I was made aware of a programmatic way to find the scoundrel element with JavaScript!
To find the element summoning demon scrollbars, you can use the following JavaScript:
document.querySelectorAll('*').forEach(el => {
if (el.offsetWidth > document.documentElement.offsetWidth) {
console.log('Found the worst element ever: ', el);
}
});
After the element has been logged to the console, you can pinpoint it and play with punishments in the element inspector as you see fit.
I'm always guilty of reverting to my old ways, i.e. visual inspection, but having a programmatic solution is so much faster and convenient!
![Interview with a Pornhub Web Developer]()
Regardless of your stance on pornography, it would be impossible to deny the massive impact the adult website industry has had on pushing the web forward. From pushing the browser's video limits to pushing ads through WebSocket so ad blockers don't detect them, you have...
![CSS Animations Between Media Queries]()
CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...
![AJAX Page Loads Using MooTools Fx.Explode]()
Note: All credit for Fx.Explode goes to Jan Kassens.
One of the awesome pieces of code in MooTools Core Developer Jan Kassens' sandbox is his Fx.Explode functionality. When you click on any of the designated Fx.Explode elements, the elements "explode" off of the...
![Using jQuery and MooTools Together]()
There's yet another reason to master more than one JavaScript library: you can use some of them together! Since MooTools is prototype-based and jQuery is not, jQuery and MooTools may be used together on the same page.
The XHTML and JavaScript
jQuery is namespaced so the...
Great little script… To make it easy to use, I ended up creating a Bookmarklet with a slightly modified version of that script. Then I can run it easily on any page.
Firefox Developer edition (not sure about the normal one) also has an indicator on the HTML element that is causing the overflow
Still didn’t help me to find the colporate for some reason… also tried the * {border: 1px solid red} trick to try to identify whats happening (tears!) – ended up just overflow-x hidden – which is lazy i guess
But.. thanks for sharing. gr8 logic that little script
I’m not sure it will help in your particular case, using outline instead of border can be a good shout, it won’t add to the width of elements (when border-box is not used)
Maybe you want to say…
Thanks for sharing
But you must to take account of margins, etc.
This line works better for me:
Detection includes cases where no scrollbar is showed but something wrong is happening.
Thanks David for inspiring us.