Скроллбар — это прыщ на лице твоего идеального дизайна
Представь: ты потратил неделю на то, чтобы вылизать интерфейс. Подобрал идеальную цветовую гамму, настроил эффект матового стекла с backdrop-filter, выверил каждый пиксель. Открываешь проект в браузере и… бам! Жирный, серый, системный скроллбар из эпохи Windows 98 врывается в твой стильный Dark Mode. Это как надеть резиновые сапоги под дорогой костюм.
Раньше мы либо мирились с этим, либо тащили тяжелые JS-библиотеки, которые эмулировали прокрутку, ломая при этом нативную производительность и доступность. Сегодня, в 2026 году, ситуация изменилась. У нас есть инструменты, чтобы усмирить эту полоску во всех браузерах без лишней боли.
Как мы страдали раньше: Эпоха костылей и -webkit- префиксов
Долгое время верстка скроллбара была зоной дикого запада. Если ты работал под WebKit (Chrome, Safari, Edge), у тебя был набор псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-thumb и так далее. Это позволяло творить магию, но стоило зайти в Firefox — и магия превращалась в тыкву. Там скроллбар оставался дефолтным.
Фанаты Firefox использовали scrollbar-color и scrollbar-width, когда те еще были в черновиках. В итоге CSS-файл превращался в свалку из префиксов, а добиться одинакового отображения было практически невозможно. Многие просто сдавались и оставляли всё «как есть», надеясь, что пользователь не заметит. Спойлер: пользователь замечал.
Как делать правильно в 2026 году: Стандарты и изящество
Сегодня мы используем комбинированный подход. Современный стандарт — это свойства scrollbar-color и scrollbar-width. Они лаконичные, производительные и уже поддерживаются всеми актуальными браузерами. Однако, если тебе нужен специфический радиус скругления или сложные тени, старый добрый -webkit- всё еще идет вторым слоем.
Важный момент: скроллбар — это часть пользовательского опыта. Не делай его слишком тонким, иначе по нему будет невозможно попасть мышкой. И всегда помни про доступность интерфейсов: визуальный индикатор прокрутки критически важен для ориентации пользователя на странице.
Вот как выглядит современный, кроссбраузерный и чистый подход к стилизации:
Готовый сниппет кода
/* Стилизация для современных браузеров (Firefox, Chrome, Edge, Safari) */
* {
/* Цвет бегунка и цвет дорожки */
scrollbar-color: #6366f1 #1e1e2e;
/* Толщина: auto, thin или none */
scrollbar-width: thin;
}
/* Кастомизация для WebKit браузеров для более тонкой настройки */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1e1e2e;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 10px;
border: 2px solid #1e1e2e; /* Отступ внутри дорожки */
}
::-webkit-scrollbar-thumb:hover {
background: #818cf8;
}
Частая ошибка новичков: «Прыгающий» контент
Самый частый факап — это когда скроллбар появляется и исчезает (например, при открытии модального окна), и весь контент сайта неприятно дергается вправо-влево на 15-20 пикселей. Это убивает ощущение качества продукта.
Решение элементарное, но о нем часто забывают: свойство scrollbar-gutter: stable. Оно резервирует место под скроллбар заранее, даже если контента мало и прокрутка не нужна. Таким образом, верстка всегда стоит как вкопанная. Используй это для контейнеров со списками или основного body, если хочешь, чтобы твой UI выглядел по-настоящему профессионально.
🔥 Больше фишек, готовых сниппетов и передовых подходов к CSS мы публикуем в нашем Telegram-канале. Подписывайтесь, чтобы не пропустить!