Как устранить скачок контента при появлении scrollbar'a в SPA?

Question

[glagola]

Всем привет!

Суть такая:

Eсть SPA (React), на некоторых страницах достаточно контента и scrollbar есть сам по себе, а на некоторых его недостаточно и scrollbar'a нет. При переходе между страницами с/без scrollbar набрлюдается небольшой горизонтальный скачок контента.

Вопрос:
Какие есть сложившиеся практики устранения данного горизонтального скачка контента страницы?

Цель вопроса:
Сформировать список решений данной проблемы.

P.S. Об этих вариантах решения проблемы я уже знаю:

1. отображать scrollbar на всех страницах, вне зависимости от высоты контента;
   
2. добавить больше контента на страницы, чтобы scrollbar добавил сам браузер;
   
3. отказаться от стандартного scrollbar'a в пользу кастомного, который не занимает места (аля macos, мобилки);
   
4. CSS хак (подходит не под все дизайны)
   

P.S.S. Есть идея как решить проблему сложно:

1. Определяем ширину scrollbar'a в браузере пользователя (в разных браузерах он разный, но +/- 3 px)
   
2. Будем добавлять класс scrollbar-X к html (где X - ширина в px из шага 1), только в случае если контент помещается во viewport браузера (scrollbar не появится) и убирать класс scrollbar-X если он не помещается (scrollbar появится)
   
3. тогда с помощью иерархических запросов в css можно будет задать padding'и для тегов исходя из конкретной ширины scrollbar'a в браузере пользователя
   

Но хочется верить, что есть вариант проще ...

Comments

[Антон Спирин]

Как устранить скачок контента при появлении scrollbar'a в SPA?
...Об этих вариантах решения проблемы я уже знаю...

В чем вопрос тогда? Думаете вам подскажут магический никому неизвестный вариант, который будет работать для всего и везде? Такого варианта нет.
На MacOS, например, стандартный скролл располагается поверх контента, автоматически скрывается и не сдвигает его. Возможно скоро все ОС перейдут на такой вариант и проблема решится сама собой.

[glagola]

Я не исключаю того варианта, что я просто не нашел этот магический способ... или любой другой приемлемый способ, который мне могут подсказать более опытные коллеги. Что там будет в будущем мне не интересно, решаем проблему, которая есть здесь и сейчас.

[Антон Спирин]

glagola, магического способа нет. Изобретение велосипеда чревато ошибками на других устройствах и системах. Подбирать вариант надо исходя из особенностей проекта. Где-то проблему решает простое добавление футера и min-height: 100vh для остальной области.

[glagola]

Все приемлемые способы для решения проблемы вы знаете.

Антон Спирин, я поражен, вашей увереностью в том, что вы знаете все приемлемые способы. Я смогу удостовериться, что я знаю все варианты, только спустя какое-то время, и только в том случае если никто больше ничего дельного не предложит.

Изобретение велосипеда чревато ошибками на других устройствах и системах.

конечно, и что?) все стандарты индустрии следуют по протоптанной дорожке, где, в свое время, проезжал велосипед.

Где-то проблему решает простое добавление футера и min-height: 100vh для контентной области.

Изменение контента/стиля страницы уже есть в списке.

Относитесь к вопросу проще - он сродни исследованию на тему.

[Сергей delphinpro]

glagola,

тогда с помощью иерархических запросов в css можно будет задать padding'и для тегов исходя из конкретной ширины scrollbar'a в браузере пользователя

Зачем медиазапросы для кучи тегов, если тем же джаваскриптом можно добавлять/убирать паддинг для body?

Собственно вы все варианты сами знаете. Выбирайте любой. Не понимаю, в чем суть вопроса: помочь вам выбрать один из вариантов?

[glagola]

Зачем медиазапросы для кучи тегов, если тем же джаваскриптом можно добавлять/убирать паддинг для body?

Сергей delphinpro, Это не вариант, если дизайн подразумевает цветные секции/растяжки во всю ширину viewport'a, то нужен индивидуальный подход для каждой секции, иначе будет просто белая полоса вместо скрола. Ваш вариант похож на эффект от варианта №4 CSS хак, только без JS.

Не понимаю, в чем суть вопроса: помочь вам выбрать один из вариантов?

Суть вопроса в том чтобы дополнить список вариантов решения проблемы.

Answer 1

[frammmm]

Можно с помощью padding-right: 17px у контейнеров. Но нужно проверять наличие скроллбара

Comments

[glagola]

Добавил в вопрос более общее описание алгоритма, на основе вашего предложения.