Howdy! I couldn't find any solid answer on Google, so I'm coming here to ask about the browser scrollbar. In my current design project, when the content of the page goes beyond the vertical viewport, the right-hand scrollbar appears. Expected. Don't want to remove it. However, for some reason my container - which uses 100vw - appears to continue with the same width it had before the scrollbar appeared, causing a portion of the padding to fall behind that scrollbar which makes the bottom horizontal scrollbar appear. This is ugly, unappealing and is annoying on a mobile screen. How do I get my container to account for the slightly smaller width dynamically?
How to account for scroll bar width
Page 1 of 12 Replies - 335 Views - Last Post: 20 August 2019 - 05:28 PM
Replies To: How to account for scroll bar width
#2
Re: How to account for scroll bar width
Posted 20 August 2019 - 05:19 PM
This is a known bug. See https://caniuse.com/...=viewport-units
One thing you can try is to add max-width: 100%; to your container and see if that helps.
Quote
Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set.
One thing you can try is to add max-width: 100%; to your container and see if that helps.
#3
Re: How to account for scroll bar width
Posted 20 August 2019 - 05:28 PM
Page 1 of 1