Стиль полосы прокрутки

Для оформления полос прокрутки используйте свойства scrollbar-width и scrollbar-color .

Bramus

Введение

Начиная со второй версии Chrome, появилась возможность стилизовать полосы прокрутки с помощью псевдоэлементов ::-webkit-scrollbar-* . Этот подход отлично работает в Chrome и Safari, но так и не был стандартизирован рабочей группой CSS.

Стандартизированы свойства scrollbar-width и scrollbar-color , являющиеся частью спецификации CSS Scrollbars Styling Module Level 1. Эти свойства поддерживаются начиная с Chrome версии 121.

Полосы прокрутки 101

Анатомия полосы прокрутки

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

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

Классические и наложенные полосы прокрутки

Прежде чем рассматривать способы оформления полос прокрутки, важно понимать различие между двумя типами полос прокрутки.

Наложение полос прокрутки

Наложенные полосы прокрутки — это плавающие полосы прокрутки, отображаемые поверх контента, расположенного под ними. По умолчанию они не отображаются, а только во время активной прокрутки. Чтобы контент под ними оставался видимым, они часто бывают полупрозрачными, но это зависит от операционной системы. Во время взаимодействия с ними их размер также может меняться.

Классические полосы прокрутки

Классические полосы прокрутки — это полосы прокрутки, расположенные в специально отведенном промежутке между внутренним краем и внешним отступом. Эти полосы прокрутки обычно непрозрачны (не прозрачны) и занимают часть пространства, прилегающего к ним.

Свойства scrollbar-color и scrollbar-width

Изменение цвета полос прокрутки с помощью scrollbar-color

Свойство scrollbar-color позволяет изменять цветовую схему полос прокрутки. Свойство принимает два значения <color> . Первое значение <color> определяет цвет ползунка, а второе — цвет, используемый для дорожки прокрутки.

.scroller {
  scrollbar-color: hotpink blue;
}

При использовании наложенной полосы прокрутки цвет дорожки по умолчанию не влияет на её отображение. Однако при наведении курсора на полосу прокрутки дорожка отобразится.

Чтобы использовать стандартный режим отображения, предоставляемый операционной системой, укажите значение параметра auto .

Изменение размера полосы прокрутки с помощью scrollbar-width

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

Допустимые значения: auto , thin и none .

• auto : Ширина полосы прокрутки по умолчанию, заданная платформой.
• thin : Тонкий вариант полосы прокрутки, предоставляемый платформой, или пользовательская полоса прокрутки, тоньше стандартной полосы прокрутки платформы.
• none : Фактически скрывает полосу прокрутки. Однако элемент по-прежнему прокручивается.

Использовать значение <length> например, 16px в качестве значения для scrollbar-width невозможно.

.scroller {
  scrollbar-width: thin;
}

При использовании наложенной полосы прокрутки ползунок отображается только во время активной прокрутки прокручиваемой области.

Поддержка более старых версий браузеров

Чтобы учесть особенности версий браузеров, не поддерживающих scrollbar-color и scrollbar-width , можно использовать как новые свойства scrollbar-* , так и ::-webkit-scrollbar-* .

.scroller {
    --scrollbar-color-thumb: hotpink;
    --scrollbar-color-track: blue;
    --scrollbar-width: thin;
    --scrollbar-width-legacy: 10px;
}

/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
    .scroller {
        scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
        scrollbar-width: var(--scrollbar-width);
    }
}

/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
    .scroller::-webkit-scrollbar-thumb {
        background: var(--scrollbar-color-thumb);
    }
    .scroller::-webkit-scrollbar-track {
        background: var(--scrollbar-color-track);
    }
    .scroller::-webkit-scrollbar {
        max-width: var(--scrollbar-width-legacy);
        max-height: var(--scrollbar-width-legacy);
    }
}

Обратите внимание, что при установке width или height ::-webkit-scrollbar всегда отображается наложенная полоса прокрутки, фактически превращая его в классическую полосу прокрутки.

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

.scroller::-webkit-scrollbar-thumb {
    background: transparent;
}
.scroller::-webkit-scrollbar-track {
    background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
    background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
    background: var(--scrollbar-color-track);
}

.scroller:hover {
    --fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}