2 Replies - 279 Views - Last Post: 20 August 2019 - 05:28 PM

#1 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 352
  • Joined: 25-August 13

How to account for scroll bar width

Posted 20 August 2019 - 05:03 PM

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?

Is This A Good Question/Topic? 0
  • +

Replies To: How to account for scroll bar width

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5465
  • View blog
  • Posts: 14,418
  • Joined: 18-April 07

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

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.
Was This Post Helpful? 1
  • +
  • -

#3 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 352
  • Joined: 25-August 13

Re: How to account for scroll bar width

Posted 20 August 2019 - 05:28 PM

View PostMartyr2, on 20 August 2019 - 05:19 PM, said:

One thing you can try is to add max-width: 100%; to your container and see if that helps.

Worked perfectly. Thanks for saving the rest of my hair. :P
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1