How to fix content jump when scrollbar appears in SPA?

Question

css

Hello!
The bottom line is this:
There is a SPA (React), on some pages there is enough content and the scrollbar is on its own, and on some it is not enough and there is no scrollbar. When switching between pages with/without a scrollbar, there is a slight horizontal jump in content.
Question:
What are the established practices for eliminating this horizontal jump of page content?
Purpose of the question:
To form a list of solutions to this problem.
PS I already know about these solutions to the problem:

1. display a scrollbar on all pages, regardless of the height of the content;
   
2. add more content to the pages so that the browser itself adds the scrollbar;
   
3. abandon the standard scrollbar in favor of a custom one that does not take up space (ala macos, mobile phones);
   
4. CSS hack (not suitable for all designs)
   

PSS I have an idea how to solve the problem is difficult:

1. Determine the width of the scrollbar in the user's browser (in different browsers it is different, but +/- 3 px)
   
2. We will add the scrollbar-X class to the html (where X is the width in px from step 1) only if the content fits in the browser's viewport (the scrollbar won't appear) and remove the scrollbar-X class if it doesn't fit (the scrollbar will appear)
   
3. then using hierarchical queries in css it will be possible to set paddings for tags based on the specific width of the scrollbar in the user's browser
   

But I want to believe that there is an easier option ...

Answer 1

You can use padding-right: 17pxcontainers. But you need to check the presence of the scrollbar