Дефолтный серый скроллбар в браузере работает как визитка на бесплатном конструкторе: функцию выполняет, но впечатление оставляет на троечку. Особенно заметно, когда весь сайт выверен до пикселя, шрифты подобраны, цвета вылизаны, а справа торчит угловатая полоса из эпохи Internet Explorer.

Разработчики часто обходят тему стороной. Не потому что сложно, четыре строки CSS решают задачу. Скорее мешают мифы: «работает только в Chrome», «пользователи не заметят», «это баловство, а не продакшен-фича».

На деле стандарт W3C закрывает базу двумя свойствами, а псевдоэлементы WebKit дают контроль над каждой деталью, от скругления до градиента. Собрал оба подхода в один туториал: от спецификации до боевого кроссбраузерного кода, который не стыдно вставить в продакшен.

💡 Быстрый обзор:

• Настраиваем скроллбар через scrollbar-width и scrollbar-color: две строки, полная кроссбраузерность, никаких префиксов.
• Осваиваем ::-webkit-scrollbar и его потомков для тонкого контроля трека, ползунка и углов.
• Собираем кроссбраузерное решение: стандарт для Firefox, псевдоэлементы для Chrome/Safari/Edge, без конфликтов.
• Разбираем частые ошибки: specificity, accessibility, потерянные кнопки, подводные камни мобильных браузеров.

Зачем стилизовать скроллбар

Первый и главный аргумент, визуальная целостность. Представьте тёмный лендинг с неоновыми акцентами и ярко-белой полосой прокрутки справа. Или светлый минималистичный сайт, где скроллбар, единственный элемент, выбивающийся из палитры. Технически не баг, но выглядит как недоработка.

Второй момент, брендинг. Цветной скроллбар становится частью визуального языка: зелёный ползунок у сервиса доставки здорового питания, оранжевый у платформы бронирования. Мелкая деталь, которая закрепляет ассоциацию без дополнительных баннеров и попапов.

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

И ключевое: это не трюк для гиков. Свойства scrollbar-width и scrollbar-color входят в спецификацию CSS Scrollbars Styling Module Level 1 и поддерживаются всеми актуальными браузерами. По данным Can I Use на июнь 2026 года, охват стандартных свойств превышает 95% пользователей, эпоха вендорных префиксов для скроллбара закончилась.

Стандартный подход: scrollbar-width и scrollbar-color

Самый простой и надёжный способ. Два свойства без префиксов, понятный синтаксис, работа в Firefox, Chrome, Edge и Safari.

Базовый синтаксис

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

Первое значение scrollbar-color, цвет ползунка (thumb), второе, цвет дорожки (track). Свойство scrollbar-width принимает три значения:

• auto, стандартная ширина (порядка 17px в Windows, 15px в macOS с мышью);
• thin, тонкий скроллбар (около 8px);
• none, скрыть скроллбар полностью (прокрутка работает, но пользователь может не понять, что контент скроллится, применяйте осторожно).

Пример для тёмной темы

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

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

Ограничения стандарта

Спецификация намеренно минималистична: нельзя задать скругление углов, тени, градиенты или hover-эффекты. Это компромисс между кастомизацией и сохранением usability, слишком нестандартный скроллбар ломает привычную модель взаимодействия. Если стандартного набора недостаточно, подключаем псевдоэлементы WebKit.

Тонкая настройка через::-webkit-scrollbar

Набор псевдоэлементов ::-webkit-scrollbar-* не входит в стандарт W3C, но поддерживается браузерами на WebKit и Blink: Chrome, Edge, Safari, Opera, Brave, Arc. Охват, по статистике Can I Use, составляет подавляющее большинство десктопных пользователей.

Архитектура скроллбара в WebKit

Браузерный скроллбар состоит из семи частей, для каждой, свой псевдоэлемент:

На практике подавляющее большинство задач решаются тремя: scrollbar, track и thumb. Остальные, для специфических дизайнерских решений.

Пример: аккуратный скроллбар для блога

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Шесть пикселей ширины, прозрачная дорожка (не видна без скролла), скруглённый ползунок с затемнением при наведении. Скроллбар не кричит о себе, но смотрится современно.

Пример с градиентом для лендинга

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

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

Скрытие скроллбара без потери прокрутки

Классический приём для модальных окон и бургер-меню:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

Контейнер остаётся прокручиваемым, но полоса исчезает и в Firefox (scrollbar-width: none), и в браузерах на WebKit (display: none на самом ::-webkit-scrollbar).

Кроссбраузерное решение

Объединяем стандарт и псевдоэлементы в один блок, покрытие практически полное:

1
/* Стандарт W3C — Firefox, современные Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* Псевдоэлементы WebKit — детальная стилизация Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

Порядок важен: сначала стандартные свойства, затем псевдоэлементы. Браузеры с поддержкой стандарта применяют scrollbar-color и игнорируют ::-webkit-scrollbar-*, так требует спецификация. Браузеры без поддержки стандарта используют псевдоэлементы. Конфликта не возникает.

Куда вставлять код

Три варианта, от простого к гибкому:

• Глобально в style.css темы. Подходит, если стиль скроллбара одинаков для всего сайта. Минус: при обновлении темы правки потеряются.
• В секцию «Дополнительные стили» кастомайзера. Путь: Внешний вид → Настроить → Дополнительные стили. Безопасный способ для WordPress: стили живут в настройках темы и не слетают при обновлении.
• Через плагин вроде Code Snippets. Если нужно прицельно задать скроллбар для конкретных страниц через CSS-классы.

В дочерней теме стили подключаются отдельным файлом через wp_enqueue_scripts с хуком wp_head.

Типичные ошибки при стилизации

Забытая кроссбраузерность. Поставили только ::-webkit-scrollbar, в Firefox осталась дефолтная полоса. Всегда добавляйте scrollbar-width и scrollbar-color парой выше по коду.

Слишком тонкий скроллбар. При ширине 2-3px в ::-webkit-scrollbar попасть по ползунку мышью становится задачей на моторику. Особенно критично на ноутбуках без внешней мыши. Минимальная комфортная ширина, 6px.

Нулевая контрастность. Серый ползунок на серой дорожке сливается в одно пятно. Минимальный цветовой контраст между thumb и track, 3:1, требование WCAG 2.1 AA для элементов интерфейса.

Переопределение всех псевдоэлементов без необходимости. Код раздувается, эффекта ноль. В большинстве случаев хватает scrollbar, track и thumb. Кнопки (button) и угол (corner) трогайте, только если дизайн этого реально требует.

Утечка стилей на всё тело. Задание на * или html без ограничений стилизует и внутренние скроллбары: текстовые поля, кодовые блоки, выпадающие списки. Для превью кода это почти всегда лишнее. Используйте селекторы по классу: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Частые вопросы

Работает ли стилизация скроллбара на мобильных устройствах?

Нет, в мобильных браузерах скроллбар не отображается статически, он появляется только во время прокрутки и управляется операционной системой. CSS-стилизация на iOS и Android не применяется. Но это не проблема: на мобильных скроллбар не является элементом постоянного интерфейса. Проверено на iOS 18 Safari и Android 15 Chrome, кастомные стили игнорируются, используется системный индикатор. На планшетах с внешней клавиатурой скроллбар может отображаться постоянно, и стили работают.

Как стилизовать горизонтальный скроллбар отдельно от вертикального?

Через псевдоэлементы с префиксом направления: ::-webkit-scrollbar-horizontal и ::-webkit-scrollbar-vertical. На практике используются редко, поддержка хуже, чем у основных псевдоэлементов. Надёжнее вешать стили на конкретный контейнер с нужным типом прокрутки через селектор класса. Для горизонтальной прокрутки внутри блока кода: .code-block::-webkit-scrollbar { height: 4px; } задаёт высоту горизонтального скроллбара, а .code-block::-webkit-scrollbar-thumb { background: #666; } стилизует ползунок. Стандартные scrollbar-width и scrollbar-color работают одинаково для обоих направлений.

Можно ли анимировать скроллбар при наведении?

Да, через transition на ::-webkit-scrollbar-thumb. Но поддержка transition на псевдоэлементах неполная: Chrome и Edge работают, Safari может глючить. Поэтому чаще используют смену цвета через :hover без анимации, надёжнее и выглядит чисто. Рабочий вариант: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } плавно меняет цвет ползунка. Для width transition не применяйте: изменение ширины скроллбара при наведении сдвигает контент и раздражает.

Как стилизовать скроллбар внутри конкретного блока, а не всей страницы?

Используйте составной селектор: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Для стандартных свойств: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Работает для любого контейнера с overflow-y: auto или overflow-y: scroll. Селектор * для скроллбара не применяйте, заденете текстовые поля и выпадающие списки.

Обязательно ли дублировать стили для ::-webkit-scrollbar и стандартных свойств?

Да, если нужна кроссбраузерность. Firefox использует только scrollbar-width и scrollbar-color, игнорируя псевдоэлементы. Chrome и Edge с версии 121 поддерживают оба механизма, но применяют стандартные свойства приоритетно, псевдоэлементы в них срабатывают как фолбэк для старых версий. Четыре строки кода (две на стандарт, две на WebKit) закрывают все браузеры без конфликтов.

Стоит ли стилизовать скроллбар в 2026 году

Однозначно да, если вы верстаете публичный сайт. Две строки стандартного CSS дают аккуратный скроллбар, который не выбивается из дизайна и не требует полифилов. Для лендингов и брендированных проектов псевдоэлементы WebKit добавляют индивидуальности без ущерба для производительности.

Главное правило, не переусердствовать. Скроллбар остаётся функциональным элементом интерфейса, а не холстом для экспериментов. Минимальная ширина 6px, контраст не ниже 3:1, никаких анимаций ширины, и пользователь даже не заметит, что скроллбар стилизован. А именно это и есть признак хорошей работы.

Если сайт на WordPress, закиньте код в дополнительные стили кастомайзера, займёт минуту. Результат останется с вами при обновлении темы и будет радовать глаз каждому, кто доскроллит страницу до конца.