CSS: оформление скроллбаров 2022

Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (они понадобятся Chrome и Safari), а также стандартизированные свойства scrollbar-width и scrollbar-color (пока для Firefox).

Таким образом, базовая настройка будет выглядеть так:

.styled-scrollbars {
  /* плашка-бегунок и фон */
  scrollbar-color: #999 #333;
}
.styled-scrollbars::-webkit-scrollbar {
  width: 10px; /* в основном для вертикальных полос прокрутки */
  height: 10px; /* в основном для горизонтальных полос прокрутки */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* плашка-бегунок */
  background: #999;
}
.styled-scrollbars::-webkit-scrollbar-track { /* фон */
  background: #333;
}

Применение пользовательских CSS-свойств для стилизации скроллбаров

Это позволит вынести дублирующиеся значения CSS-свойств в настройки, например:

.styled-scrollbars {
  --scrollbar-foreground: #999;
  --scrollbar-background: #333;
  --scrollbar-size: 10px;
  /* плашка-бегунок, фон */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.styled-scrollbars::-webkit-scrollbar {
  width: var(--scrollbar-size); /* в основном для вертикальных полос прокрутки */
  height: var(--scrollbar-size); /* в основном для горизонтальных полос прокрутки */
}
.styled-scrollbars::-webkit-scrollbar-thumb { /* плашка-бегунок */
  background: var(--scrollbar-foreground); /* фон */
}
.styled-scrollbars::-webkit-scrollbar-track { /* фон */
  background: var(--scrollbar-background);
}

Sass Mixin и другие опции предварительной обработки

При использовании Sass код может выглядеть следующим образом:

@mixin scrollbars(
  $size: 10px,
  $foreground-color: #999,
  $background-color: #333
) {
  // для Chrome и Safari
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }
  // по стандартам (Firefox)
  scrollbar-color: $foreground-color $background-color;
}

Можно предположить, что с вендорными префиксами Autoprefixer может справиться лучше. Но это не будет хорошим решением, потому что синтаксис для каждого браузера будет очень сильно отличаться.

Если используется PostCSS, то для него есть плагин postcss-scrollbar. В коде используется стандартизированный синтаксис, а плагин делает соответствующие версии префиксов для разных браузеров.

Исходный код:

.scrollable {
  scrollbar-color: yellow green;
  scrollbar-width: thin;
}

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

.scrollable::-webkit-scrollbar-thumb {
  background-color: yellow;
}
.scrollable::-webkit-scrollbar-track {
  background-color: green;
}
.scrollable::-webkit-scrollbar-corner {
  background-color: green;
}
.scrollable::-webkit-scrollbar {
  width: 0.5rem;
  height: 0.5rem;
}
.scrollable {
  -ms-overflow-style: auto;
  scrollbar-color: yellow green;
  scrollbar-width: thin;
}

Более экзотические стили скроллбаров в Chrome и Safari

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

Например, ширину вертикальной полосы прокрутки можно сделать очень большой и добавить градиент:

See this code Styling scrollbars with CSS-gradient 2022 on x.xhtml.ru.

Вот еще несколько стилей, в которых используется подход с вендорными префиксами:

See this code Styling scrollbars ::webkit- 2022 on x.xhtml.ru.

Стилизация скроллбаров с помощью JavaScript

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

Для этого должны быть десятки библиотек. Например, simplebar выглядит довольно современным с простым созданием экземпляров. Вот демонстрация:

See this code Styling scrollbar with simplebar on x.xhtml.ru.

Пример кроссбраузерной стилизации полос прокрутки (scrollbar)

Это выглядит довольно прилично в Chrome, Safari и Firefox:

See this code Crossbrowser custom scrollbar 2022 on x.xhtml.ru.

The Current State of Styling Scrollbars in CSS