If a website consists out of navigation events (such as blogs where articles can vary in height) and the content is horizontally centered - the content shifts to the left when a scrollbar is added because the viewport width is minimized.
However, this property has been deprecated instead of marked as for example, experimental.
When a website contains pages that may only need the existing viewport height (i.e. doesn't have a vertical overflow) combined with pages that do have a vertical overflow:
- Should a website integrate the width of the scrollbar into the viewport width?
- Why was the
overlayproperty deprecated and not picked up on?
A solution to replacing the previous
overlay property is setting the body width to the full viewport width (
width: 100vw) and the width overflow hidden.
This will make the body element "overflow" through the x-axis when there's an added scrollbar, which emulates the behavior of the
See JSFiddle using this solution.
Now, would this enhance the user experience whilst altering the standard browser behavior, or would this be bad practice and annoying to a selected few users - if so, in what scenarios?