scrollbar-width: скрываем и уменьшаем скроллбары одним CSS-свойством

CSS-свойство scrollbar-width управляет шириной полосы прокрутки. Никаких хаков с псевдоэлементами ::-webkit-scrollbar — просто одна строка.

Значения

• auto — стандартная ширина, браузер решает сам (дефолт)
• thin — уменьшенная полоса прокрутки
• none — скроллбар полностью скрыт (прокрутка при этом всё равно работает)

Поддержка браузеров

По данным Can I Use на середину 2026 года картина такая:

• Chrome — с версии 121
• Edge — с версии 121
• Firefox — с версии 64 (первый среди десктопных браузеров поддержал свойство)
• Opera — с версии 107
• Samsung Internet — с версии 25
• Chrome for Android — поддерживается
• Firefox for Android — поддерживается
• Safari / Safari on iOS — поддержка появилась начиная с версии 18.2

IE, старые Android Browser, Opera Mini и ряд других экзотических браузеров — не поддерживают.

Пример использования

/* Спрятать скроллбар, сохранив прокрутку */
.container {
 scrollbar-width: none;
}

/* Сделать скроллбар тоньше */
.sidebar {
 scrollbar-width: thin;
}

Если нужна совместимость со старым Safari (до 18.2), придётся держать рядом фолбэк через ::-webkit-scrollbar. Но для большинства современных проектов scrollbar-width уже вполне рабочий инструмент без дополнительных телодвижений.