Prevent layout jumps on changing overflow hidden to scroll #6262
Description
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.