На главную

Контроль над полосой прокрутки: Знакомство со спецификацией CSS Scrollbars Styling Module Level 1

Полосы прокрутки — это неотъемлемая часть взаимодействия с веб-страницей, особенно в современном мире, где контент часто динамически подгружается, а интерфейсы становятся сложнее. Долгое время разработчики были ограничены в возможностях их стилизации. На смену хаков с JavaScript и плагинам пришёл стандартизированный подход — спецификация CSS Scrollbars Styling Module Level 1.

CSS Scrollbars Styling Module Level 1

CSS Scrollbars Styling Module Level 1 — находится на стадии «Кандидата в рекомендации». Это означает, что спецификация стабильна, прошла широкое обсуждение и готова к внедрению в браузеры.

Основная цель модуля — предоставить веб-разработчикам простой и стандартизированный способ влиять на визуальное оформление полос прокрутки. Спецификация определяет два ключевых аспекта:

  1. Цвет полосы прокрутки: бегунка и трека
  2. Толщину (ширину) полосы прокрутки.
бегунок трек

ширина трека

Иллюстрация кастомных частей скролбара: трек (полоса) и бегунок

Важно понимать, что эта спецификация занимается именно внешним видом самого элемента управления (scrollbar), а не тем, как контент прокручивается или располагается на странице. За логику прокрутки отвечает модуль CSS Overflow Module.

Почему это важно? (Область применения)

До появления этого модуля стилизация скроллбаров была возможна только через нестандартные псевдоэлементы (::-webkit-scrollbar), которые работали лишь в браузерах на движке WebKit (Safari, старые версии Chrome/Edge) и официально считаются ошибкой (mistake) со стороны рабочей группы CSS. Новый подход решает три основные задачи:

  1. Брендирование и эстетика: Позволяет подобрать цвет скроллбара под цветовую схему веб-приложения, делая интерфейс целостным.
  2. Экономия пространства: Даёт возможность сделать скроллбар тоньше (thin) в небольших областях прокрутки, где важна экономия места.
  3. Создание кастомных интерфейсов: Позволяет полностью скрыть стандартный скроллбар (none), чтобы на его месте реализовать свою уникальную логику прокрутки, не затрагивая при этом саму возможность прокручивать контент. Повторюсь, спецификация отвечает только за внешний вид, а не функциональность.

Что НЕ входит в задачи спецификации (Out Of Scope)

Создатели спецификации намеренно отказались от излишней детализации. Вы не сможете управлять внутренним устройством скроллбара, например, стилизовать стрелки или фон кнопок по отдельности. Это сделано намеренно, так как структура скроллбаров сильно различается в разных операционных системах (Windows, macOS, Linux). Попытка задать жесткую структуру привела бы к тому, что на одних платформах дизайн выглядел бы идеально, а на других — сломался.

Основные свойства спецификации

Спецификация вводит два основных CSS-свойства: scrollbar-color и scrollbar-width. Оба свойства применяются к scroll containers (элементам, которые могут прокручиваться, например, с overflow: auto или overflow: scroll).

1. Управление цветом: scrollbar-color

Свойство scrollbar-color позволяет задать цвета для двух основных частей полосы прокрутки:

  • Thumb (бегунок): Движущаяся часть, которую пользователь перетаскивает.
  • Track (трек): Фон или дорожка, по которой движется бегунок.

Синтаксис:

scrollbar-color: auto | <цвет-бегунка> <цвет-трека>;

Значения:

  • auto (по умолчанию): Браузер сам определяет цвета, следуя настройкам операционной системы или страницы (например, учитывая color-scheme).
  • <цвет> <цвет>: Первое значение задаёт цвет бегунка, второе — цвет трека.

Важные замечания:

  • Свойство наследуется (inherited: yes). Если задать цвет для <body>, он применится ко всем скроллбарам на странице, если только не будет переопределён позже.
  • Если свойство задано для корневого элемента <html>, оно применяется к скроллбару всего окна просмотра (viewport). При этом, в отличие от overflow, значения с <body> на вьюпорт не распространяются.
  • Браузеры могут игнорировать цвета, если на платформе нет соответствующих частей скроллбара, или упростить его отрисовку, чтобы иметь возможность применить цвета.

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

Создадим простую карточку с большим объёмом текста и стилизуем её скроллбар.

HTML:

<article class="card">
  <h2>Карточка товара</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (очень много текста) ...</p>
  <p>...</p>
</article>

CSS:

.card {
  scrollbar-color: #ff6b6b #ffe3e3;
  /* Бегунок будет красноватым, трек — светло-розовым */
}

Начните скролить внутри блока “длинный текст” (ниже), чтобы увидеть красноватый бегунок. Чтобы увидеть розовый трек, в некоторых операционных системах нужно навести курсор на бегунок. Нужно успеть сделать это до того, как бегунок скроется. Но иногда поведение зависит от конкретного браузера. В Сафари на macOS мне не удалось увидеть трек.

Длинный текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (очень много текста) ...

...

Стилизованный скроллбар с помощью свойства scrollbar-color

Результат: В браузерах, поддерживающих спецификацию (Firefox, новые версии Chrome/Edge), вы увидите, что бегунок стал красноватым, а дорожка — светло-розовой

2. Управление толщиной: scrollbar-width

Свойство scrollbar-width позволяет контролировать, насколько толстым будет скроллбар.

Синтаксис:

scrollbar-width: auto | thin | none;

Значения:

  • auto (по умолчанию): Стандартная ширина скроллбара, предусмотренная операционной системой или настройками пользователя.
  • thin: Более тонкая версия скроллбара. Браузер должен предоставить скроллбар тоньше обычного, но при этом сохранить его удобство для взаимодействия. Если платформа не позволяет сделать скроллбар тоньше (например, он и так минимален), значение может работать как auto.
  • none: Полностью скрывает скроллбар. Важно: при этом элемент остаётся прокручиваемым (например, с помощью колёсика мыши, клавиатуры или тачпада). Используйте это значение с осторожностью, так как оно может сделать контент недоступным для пользователей, которые полагаются только на мышь.
трек
Показывает ширину трека

Важные замечания:

  • Свойство не наследуется (inherited: no).
  • Основная цель thin — не эстетика, а решение проблемы нехватки места в “тесных” интерфейсах.
  • Значение none — это мощный инструмент для создания кастомных скроллбаров на JavaScript. Вы скрываете стандартный, а поверх рисуете свой. При этом браузерная логика прокрутки продолжает работать.
  • Как и в случае с цветом, значение для корневого элемента <html> применяется к вьюпорту, а с <body> — нет.

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

Модифицируем наш предыдущий пример. Допустим, карточка очень маленькая, и стандартный скроллбар “съедает” много драгоценного места.

CSS (дополнение к предыдущему примеру):

.card {
    /* ... все предыдущие стили ... */
    scrollbar-color: #ff6b6b #ffe3e3;
    scrollbar-width: thin; /* Делаем скроллбар тоньше */
}

В некоторых браузерах и операционных системах thin и auto могут отличаться незначительно, так что разница практически неощутима, но на самом деле она есть.

Длинный текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (очень много текста) ...

...

Длинный текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (очень много текста) ...

...

Слева scrollbar-width: auto. Уменьшенный скроллбар с помощью свойства scrollbar-width: thin справа.

Результат: Полоса прокрутки станет уже. Пользователь по-прежнему может ей пользоваться, но места она занимает меньше.

Пример использования scrollbar-width: none

Рассмотрим другой сценарий: мы хотим полностью скрыть стандартный скроллбар, но оставить возможность прокрутки.

CSS (дополнение к предыдущему примеру):

.card {
    /* ... все предыдущие стили ... */
    scrollbar-color: #ff6b6b #ffe3e3;
    scrollbar-width: none; /* Полностью скрываем скроллбар */
}

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

Длинный текст

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... (очень много текста) ...

...

Скрытый скроллбар с помощью свойства scrollbar-width: none

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

Доступность (Accessibility) и лучшие практики

Спецификация уделяет большое внимание доступности:

  1. Контрастность: При задании пользовательских цветов с помощью scrollbar-color автор должен убедиться, что между цветом бегунка и трека достаточно контраста (согласно WCAG 2.1 SC 1.4.11). Пользовательские настройки могут отключать эти требования.
  2. Тонкие скроллбары: Используя scrollbar-width: thin, убедитесь, что скроллбар остаётся достаточно широким, чтобы по нему можно было легко попасть курсором. WCAG 2.1 рекомендует минимальный размер цели 44x44 CSS-пикселя. Браузеры могут динамически увеличивать тонкий скроллбар при наведении.
  3. Осторожность с none: Никогда не скрывайте скроллбар (scrollbar-width: none), если это единственный способ для пользователя обнаружить, что контент прокручивается. Всегда предоставляйте альтернативные визуальные подсказки.
  4. Уважение к пользователю: Пользователи могут настроить предпочтительный стиль скроллбаров в своей ОС или браузере (например, всегда показывать широкие скроллбары). В спецификации сказано, что браузеры могут игнорировать значение thin, если пользователь указал, что ему некомфортно с тонкими скроллбарами.

Поддержка браузерами

Оба CSS-свойства scrollbar-color и scrollbar-width являются Newly available в инициативе Baseline. При чём с разницей в год.

Widely available scrollbar-color станет 12 июня 2028, а scrollbar-width станет 11 июня 2027 года.

На данный момент разница в работе очевидно, в Safari она отличается.