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

Используйте свойства scrollbar-width и scrollbar-color для стилизации полос прокрутки.

Bramus

Введение

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

Что было стандартизировано, так это свойства scrollbar-width и scrollbar-color , которые являются частью спецификации модуля стилизации полос прокрутки CSS уровня 1 . Эти свойства поддерживаются начиная с Chrome 121.

Browser Support

• 121
• 121
• 64
• x

Source

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

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

Как минимум полоса прокрутки состоит из дорожки и ползунка. Дорожка — это область, по которой может двигаться большой палец. Трек представляет собой всю дистанцию ​​прокрутки. Большой палец представляет текущую позицию в прокручиваемой области. При прокрутке он перемещается внутри дорожки. Большой палец часто также можно перетаскивать.

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

Иллюстрация частей, составляющих полосу прокрутки. На рисунке слева представлена ​​минимальная полоса прокрутки, состоящая только из дорожки и ползунка. Тот, что справа, также имеет кнопки.

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

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

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

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

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

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

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

Иллюстрация браузера с классической полосой прокрутки. Полоса прокрутки расположена рядом с содержимым в отдельной области; доступная ширина содержимого уменьшается по сравнению с доступной шириной при использовании наложенных полос прокрутки.

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

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

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

.scroller {
  scrollbar-color: hotpink blue;
}

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

Демо: Стилизация полос прокрутки: scrollbar-color

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

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

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

Принимаемые значения: auto , thin и none .

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

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

.scroller {
  scrollbar-width: thin;
}

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

Демо: Стилизация полос прокрутки: scrollbar-width

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

Для поддержки версий браузера, которые не поддерживают 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);
    }
}

Демонстрация: стилизация полос прокрутки с использованием scrollbar-* с возвратом к ::-webkit-scrollbar-*

Обратите внимание, что когда вы устанавливаете 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. */
}

Демонстрация: стилизация полос прокрутки с использованием scrollbar-* с запасным вариантом ::-webkit-scrollbar-* , применение цветов ::-webkit-scrollbar-* только при наведении курсора