2

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.

two monitors with browser content overflow and not overflowing vertically

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: a monitor with browser content switching from overflowing to not overflowing

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: a monitor with browser content switching from overflowing to not overflowing without altering 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 overlay property deprecated and not picked up on?

Solution

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 overlay property.

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?

Improve this question
5
  • Will your users ever have opportunity to see the shift? If so, what is that scenario, and how likely?
    – bloodyKnuckles
    Jan 1 at 14:02
  • 1
    Yes, @bloodyKnuckles. I'd say as likely as every web user will see the shift. Consider an index page consisting only of e.g. navigation links and a small article snippet, and an article page with overflowing content.
    – Nora Söderlund
    Jan 1 at 14:10
  • And if you bundle up more pages and content, the shift becomes more apparent when you start having several navigation events.
    – Nora Söderlund
    Jan 1 at 14:10
  • I think I was asking the wrong question initially, I believe my question should be more towards "would it be a bad user experience to alter the default scrollbar behavior, when the overlay property has been deprecated?". I've added a "solution" section to the end of the question, clarifying the proposed usage.
    – Nora Söderlund
    Jan 1 at 14:28
  • 1
    As a user: please do apply any solution that avoids that first gif :) Not only is it visually annoying, but I'm tired of misclicking when a button shifts to the left (or elsewhere as wrap behaviour kicks in!). And it doesn't even have to be any interaction that triggers the shift; late loaded content, styles, scripts can do it too. Very frustrating.
    – Luke Sawczak
    Jan 1 at 14:34

1 Answer 1

Reset to default
2

This seems to be a multi-part question, so:

Should scrollbars overlay?

The answer seems to be "yes, scrollbars should overlay" - Firefox is using it by default, and Microsoft is currently adding it to Chrome (flag: #overlay-scrollbars) and Edge (flag: #edge-overlay-scrollbars-win-style).

Why is overflow:overlay deprecated?

Because it never was defined and apparently just kinda slipped in from Safari. Apple since has taken the stance that overlay vs classic scrollbars should be a user choice exclusively, not a web author choice.

Should I go against default behavior?

Going against the default browser behavior isn't bad per se - it's what web design is.

Outside of obvious padding issues, I have no strong opinion either way on whether overlay vs classic scrollbars should be a user choice or a web author choice.

Lastly, a small note on the implementation which likely is what you were after in the first place:

The scrollbar-gutter CSS property allows authors to reserve space for the scrollbar, preventing unwanted layout changes as the content grows while also avoiding unnecessary visuals when scrolling isn't needed.

Looks like someone thought of your use case already.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.