We’ll want to perform this both on page load and on resize, in case someone resizes the window vertically and changes the overflow. If these are different, we can subtract the body width from the window width to get the width of the scrollbar:Ĭonst scrollbarWidth = window. If these are equal, the scrollbar isn’t visible. With JavaScript, you can actually calculate the width of the scrollbar and whether it’s visible by comparing two properties- window.innerWidth and. I know, I know-needing to use JavaScript when writing CSS does feel like defeat, but unless there’s a vwWithoutTheScrollbarPlease unit in CSS, you’re going to need use JavaScript. If you can’t restructure this layout to apply the max-width to the siblings instead of the container and keep the container full-width, you might need to rely on… JavaScript. Now, there are rare cases where width: 100% doesn’t fit the bill, like a full-width element within a max-width container. (I’ve never had a pool, but I know this kid exists from friends of mine who grew up with pools. If width: 100% is your friend, then width: 100vw is the kid who only pretends to be your friend, so that he can swim in your pool. If you catch yourself going to use width: 100%, then think to yourself, “Oh, I can finally use width: 100vw, which is pretty much the same as width: 100%,” stop what you’re doing and remember this post. Setting the OS preference will only help you detect the issue, but to fix it, prioritize using width: 100% whenever possible. It’s better to be the one who notices first and fixes them, rather than receiving an unexpected looping gif of your prized website, scrolling side-to-side in a way that was never intended. If you work on a team, these 100vw issues always seem to creep into the codebase. Setting this preference might seem extreme, but trust me-it’s like taking the red pill.

On macOS, this is in System Preferences > General > Show scroll bars: Always. First, set your OS preferences to always show scrollbars. Luckily, there are two easy ways to avoid this issue along with the humiliation of having a slight horizontal overflow on your website. This isn’t a problem for anyone using a touch device or trackpad, where the scroll indicator overlays the content, but for folks who keep the vertical scrollbar visible, your website is busted. This is true on a page that doesn’t scroll vertically, but what you might not realize is that the viewport actually includes the scrollbars, too. Setting an element’s width to 100vw does tell the browser to span the entire viewport width, but what is considered the viewport? Many assume that width: 100vw is the same as width: 100%. If you use width: 100vw on a website, there’s a good chance the horizontal scrollbar is visible for many users. What’s going on there is that there is an element that is positioned there, offscreen, with opacity: 0 so you can’t see it.Random 100vw and the horizontal overflow you probably didn’t know about Jul 16th, 2020 I’ve made a basic demo of that scenario, see this GIF: Like when it doesn’t trigger a horizontal scrollbar, but you can still expose the overflow by swiping with a touchpad or select-and-dragging. Sometimes horizontal overflow is more elusive. var docWidth = Īnother minor little trick that helps me sometimes is to scroll over so you can see offending overflow area, and then click and Inspect Element in that space to see if you can target the offending element.

You could use a little JavaScript to help you find the culprit. In some cases, there might be an element that is literally wider than the document is, which might cause horizontal overflow scrolling. Here’s a super quick video of that kind of troubleshooting: Then I know which element caused it and can drill down from there. Sometimes I use the “Delete Node” feature of DevTools to remove stuff from the page until the scrollbar goes away. That can be a pain, but you can usually find the offending element by surfing around the ol’ DevTools and selecting elements until you find something that extends too far over to to the right (off-page to the left doesn’t tend to trigger a scrollbar the same way) and adjusting it. Ughck, accidental horizontal scrollbar, amiright?

Html overflow scrolling easier