Недавно увидел потрясающий CSS хак как компенсировать сдвиг сайта, когда у вас появляется скролл на странице. Вся верстка будто прыгает, появлется так называемый CLS – content layout shift. Нехорошо. Глаз раздражает и приводит к мискликам (смотри комментарии к посту).
А хак до жути простой:
padding-left: calc(100vw - 100%); // 15px
100vw – ширина всей страницы с учетом скролбара
100% – ширина страницы без учета скролбара
Вычитаем и получаем заветные 15px, когда скролл есть и 0px, когда его нет. А дальше добавляем куда вам нужно – будь это padding, margin, top, left или еще чего. Просто и гениально.
А пост пишу, потому что удалось сразу проверить в проде как оно работает. Весь дифф до и после компенсации видно на видео.
Не забывайте про мелочи (а тем более про CLS) и тогда сайтом будет действительно приятно пользоваться.
@dlents