CSS scrollbar-gutter: убрать скачок ширины страницы

Категория: CSS · Язык: CSS · Обновлено:

Когда появляется классическая вертикальная полоса прокрутки, она занимает место и может сдвинуть центрированную страницу. scrollbar-gutter: stable заранее резервирует для неё место в прокручиваемом контейнере, поэтому ширина полезной области не меняется при появлении содержимого.

Зарезервировать место для полосы прокрутки

CSS
.dialog-content {
  max-block-size: 70vh;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

Добавляйте свойство именно на элемент, который прокручивается. Если нужно симметрично зарезервировать место с обеих сторон контейнера, можно использовать stable both-edges.

У overlay-полос прокрутки, которые не занимают layout-space, резервировать нечего. Свойство не показывает и не скрывает полосу, а меняет только доступное место. Проверьте поддержку в целевых браузерах, если проект должен работать на старых версиях.

Спецификация: CSS Overflow Module Level 3.