Prevent layout jumps on changing overflow hidden to scroll

[amir2mi]

This is an obvious one but let me dissect it.

First of all look at the Slack.com sidebar scrollbar, it is pretty great and natural, something that can be done on the web when you know hacks and do some tricks:

Now see the version of browser pure scrollbar that I have made with that:

Here is the simple code of this behavior:

.sidebar{
     overflow: hidden;
}

.sidebar:focus-within,
.sidebar:hover{
     overflow: auto;
}

So when the scrollbar is displayed it is part of its wrapper and adds its width, which causes unwanted layout jumps and shifts other parts.
In contrast, when a modal wants to be shown body overflow should be hidden to prevent the user from scrolling, and here we have another layout jumping again and it is disgusting; there are hacks for this but it is not enough, to be honest.

I wish if we had a feature in CSS to optimize these situations like this:

.sidebar{
     scrollbar-place: beside | over;

     // beside as default
     // 'over' means it does not have any effect on neighbors something like [position: absolute] for elements.
}

In my dreams, I think about pure web scrollbars like native operating system smart scrollbars:

I searched about it but it seems there is no native way to handle this situation if there is let me know.

[Loirooriol]

scrollbar-gutter can provide stability.

But choosing between classic and overlay scrollbars is not possible, see #6090.

[amir2mi]

Thanks @Loirooriol, I did not know about "scrollbar-gutter" it's great but not the savior completely.

Whether classic scrollbars or overlay scrollbars are used is UA defined.

Depends on this quote I think there is a possibility, I mean if it can be changed by UA, also with CSS, there must not be any problems.
or probably I'm wrong however is it really a troublesome feature to add?

[emilio]

Whether scrollbars are or not overlay depends on the OS convention, and I think it's not something people are going to give up so easily. But why does scrollbar-gutter not solve the issue for you? If the scrollbars are overlay, there's no jump to begin with.

[emilio]

Oh I guess you want to force-enable overlay scrollbars (and I guess by extension also enable to force-enable non-overlay scrollbars), on a per-scroller level?

[amir2mi]

@emilio I just used "scrollbar-gutter" under the flag with chrome and it is the result:

That is a great feature instead of those estimated paddings with js, I can say it is the solution for my problem although,
my goal is something more than this for example if I use "scrollbar-gutter" for slack that I said about it, it still occupies the space and it is not over the content.

The mockup about what I think about future more flexible custom scrollbars (changing scrollbar width does not affect others):

Anyway, that's my thought I somehow found the solution thanks.

[jonjohnjohnson]

[...] my goal is something more than this for example if I use "scrollbar-gutter" for slack that I said about it, it still occupies the space and it is not over the content.

@amir2mi Since we probably won't ever be able to force native overlay scrollbars, I've found it quite simple to use transform/perspective/sticky and some basic event handling for hovering/grabbing the scrollbar to be completely sufficient/performant in faking them. Good luck!

https://developers.google.com/web/updates/2017/03/custom-scrollbar

[amir2mi]

@jonjohnjohnson Thanks for sharing! I did not get the whole concept completely tbh, but that is a cool walkaround though it has its own problems, the main is that the scrollbar thumb is under that content so if the content has a background the scrollbar will be invisible.

Now with KingSora/OverlayScrollbars I can simply solve the problem but it is not native and that is the problem.

[frivoal]

Per #6262 (comment), part of this issue is already addressed, and the other part can't be addressed at this point in time. Closing.