Menu
Horizontal scrollbars on web sites and HTML apps are generally bad for usability and unwanted. It's reasonably common to find them cropping up unexpectedly and I'm in need of a way to quickly debug and remove them.
What is a quick and easy way to find offending HTML elements in your design?
Yes, you can go through your page deleting/hiding elements one by one until you find a suspect, but this is time consuming, especially if there are multiple offending elements. It would be great to click a shortcut or run a script and have all the suspected elements highlighted, outlined or printed to the console.
To clarify: the problem is not how to solve it, but how to detect it. I'd like a general solution which can work whenever this issue appears.
360
To find out which elements cause a horizontal scrollbar, you can use the devtools to delete elements one by one until the scrollbar disappears.
You horizontal scrollbar is caused because your site-section has a width of 100vw. The browser is fine with that but it also accounts for margin and padding (blue and red). This results in an overflow and thus the browser adds a horizontal scrollbar (along with a vertical one); The best way to fix this is to use calc.
An overflow issue occurs when a horizontal scrollbar unintentionally appears on a web page, allowing the user to scroll horizontally. It can be caused by different factors. It could occur because of unexpectedly wide content or a fixed-width element that is wider than the viewport.
To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: HTML.
In a narrower scope, you can use jQuery (to get the width) and node.scrollWidth to get nodes that have content that overflow their bounds.
http://jsfiddle.net/tomprogramming/v3Q6W/3/
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
