Полоса прокрутки

Полоса состоит из дорожки и ползунка, а в некоторых системах ещё и кнопок со стрелками. Появляется она там, где содержимое больше контейнера и разрешена прокрутка: у всей страницы, у широкой таблицы с прайсом, у длинного списка в фильтре каталога.

В вёрстке важно различать два вида полос. Классические занимают место: в Windows и большинстве сборок Linux они отнимают у содержимого порядка полутора десятков пикселей ширины. Накладные (overlay) — на macOS с настройками по умолчанию, на Android и iOS — появляются поверх контента только во время прокрутки и места не занимают. Поэтому разработчик на Mac может не заметить проблему, которую видит любой пользователь Windows, и при вёрстке по макету страницы обязательно проверяют на обеих системах.

Типичные проблемы вёрстки

• Горизонтальная прокрутка от 100vw. Единица vw считается от ширины окна вместе с классической полосой. Блок шириной 100vw оказывается шире видимой области, и внизу появляется лишняя горизонтальная полоса. Для блока на всю ширину обычно хватает width: 100%.
• Прыжок контента. Короткая страница без полосы и длинная с полосой отличаются по ширине, и при переходе между ними центрированная вёрстка дёргается в сторону.
• Сдвиг под модальным окном. Если на время показа окна запретить прокрутку страницы через overflow: hidden, полоса исчезнет, а содержимое расползётся на её ширину.

Как зарезервировать место

Две последние проблемы решает свойство scrollbar-gutter: оно оставляет место под полосу, даже когда самой полосы нет.

html {
  scrollbar-gutter: stable;
}

/* открыто модальное окно — фон не прокручивается */
html.modal-open {
  overflow: hidden;
}

На системах с накладными полосами свойство ни на что не влияет — там резервировать нечего.

Скрывать или нет

Спрятать полосу можно через scrollbar-width: none, но это оправдано разве что в горизонтальных каруселях, где есть стрелки и другие подсказки. В обычных блоках видимая полоса — единственный признак, что внутри есть ещё содержимое. Без неё пользователь без колеса мыши или с нарушениями моторики может не добраться до конца списка.