How to prevent that the scrollbar has an effect on the width of the side?

JavaScript
1

Hi there,

when the scrollbar is showing up on a website it has an effect on the overall width of the site, this means that when the scrollbar dissapears the whole content will change the position. Is there any way to prevent that this happens?

Here is a short video to show exactly what I mean:

Thanks for answers!

2

You could force the scrollbar to always be shown via overflow: scroll;

You set the width of the document with 100vw which doesn’t count the scroll gutter (apparently)

You could add padding to the right side equal to the width of the scrollbar.

I’m sure you could find better answers on CSS Tricks or StackOverflow.

1 Like
3

Newer solution: Scrollbar Reflowing | CSS-Tricks - CSS-Tricks

Older solution: More Elegant Fix for Jumping Scrollbar Issue | CSS-Tricks - CSS-Tricks

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.