Как настроить цвет или толщину полосы прокрутки

Веб-функции: scrollbar-color scrollbar-width

Вы можете настроить внешний вид полос прокрутки с помощью стандартных свойств CSS scrollbar-color и scrollbar-width.

  • scrollbar-color: принимает два значения <color>. Первый применяется к ползунку (движущейся части), а второй – к дорожке (фиксированному фону).
  • scrollbar-width: принимает значения auto (по умолчанию), thin (более тонкий вариант) или none (полностью скрывает полосу прокрутки, сохраняя возможность прокрутки).

Применить scrollbar-color и scrollbar-width

ОБЯЗАТЕЛЬНО. Используйте scrollbar-color и scrollbar-width в прокручиваемом контейнере.

При использовании scrollbar-color используйте переменные CSS, чтобы цвета ползунка и полосы прокрутки были разными. Это повысит читаемость и упростит обслуживание (особенно при использовании резервных вариантов).

.scroller {
  --scrollbar-thumb: var(--color-neutral-70);
  --scrollbar-track: var(--color-neutral-90);

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

Резервные стратегии

Резервные варианты и поддержка свойства scrollbar-color в браузерах

Эта функция представляет собой прогрессивное улучшение и не всегда требует резервных объявлений.

Если стиль важен, а целевой набор Baseline пользователя – Baseline Widely Available или более ранний, вам СЛЕДУЕТ включить нестандартные псевдоэлементы ::-webkit-scrollbar в качестве резервных.

Чтобы избежать конфликтов между стандартными свойствами и устаревшими селекторами WebKit в браузерах, которые поддерживают и то, и другое, поместите резервные объявления в блок @supports not (scrollbar-color: auto).

Если вы используете пользовательские свойства для определения цветов, они будут автоматически каскадироваться в устаревшие селекторы WebKit. Дублировать их НЕ нужно.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}