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.
When these two examples are put alongside each other, the difference is hardly noticeably, however, put overlapping (like the flow of browser navigation) - the difference becomes clear:
There once was an
overlay property for the CSS overflow element, which would draw the scrollbar on top of the viewport content, which wouldn't reduce the viewport width:
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?