Генератор CSS-скроллбара

Современные стандартные свойства (2023+)

/* Применяется к элементу, который прокручивается */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* бегунок дорожка */
}

Поддержка браузерами (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Резервирует место под скроллбар, даже когда оно не нужно, предотвращая сдвиг макета.

Webkit-псевдоэлементы (Chrome, Safari, старый Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Более детальный контроль. width задает ширину вертикального скроллбара; height задает высоту горизонтального скроллбара. Добавьте оба для контейнеров, которые могут прокручиваться в любом направлении.

Каскадирование двух подходов

Сначала укажите современные правила, затем webkit как улучшение для браузеров, которые отрисовывают оба:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox учитывает только современные правила scrollbar-*. Chrome и Safari учитывают webkit-правила (которые переопределяют современные, поэтому поведение согласовано).

scrollbar-gutter предотвращает сдвиг контента

Без зарезервированного желоба контент перетекает, когда появляется скроллбар (частое явление в динамических списках). Решение:

html { scrollbar-gutter: stable; }
/* или */
html { scrollbar-gutter: stable both-edges; }

Слот скроллбара резервируется независимо от того, прокручивается ли контент. both-edges добавляет соответствующий желоб с противоположной стороны, чтобы контент оставался визуально центрированным.

Полностью скрыть скроллбары

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

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

Особенности мобильных

На iOS и Android скроллбары появляются лишь на мгновение во время прокрутки. Ваш кастомный CSS скроллбара все равно применяется, но пользователи могут так и не увидеть его дольше секунды. Проектируйте соответственно, не вкладывайтесь сильно в визуальные изыски, которые редко появляются.

Доступность

• Контраст: бегунок относительно дорожки должен соответствовать 3:1 для нетекстового контраста (WCAG 1.4.11).
• Ширина: тонкие скроллбары трудно захватить мышью, особенно пользователям с моторными нарушениями. Обычная ширина, более безопасный дефолт.
• Никогда не убирайте скроллбар на прокручиваемых областях, не предоставив другой способ прокрутки. Пользователи, полагающиеся на скроллбар, окажутся в тупике.