Цвет полосы прокрутки - CSS-хитрости

Anonim

scrollbar-colorСвойство контролирует два цвета прокрутки: по цвету пальца и цвет дорожки . scrollbar-colorявляется частью проекта уровня 1 модуля полос прокрутки рабочей группы CSS, работа над которым на момент написания этой статьи еще не завершена.

Раньше у scrollbar-colorразработчиков не было стандартного способа изменить внешний вид полос прокрутки браузера по умолчанию, не прибегая к скрытию полосы прокрутки с помощью overflow: hiddenи отображению полос прокрутки на основе JavaScript или с использованием атрибутов полосы прокрутки с префиксом браузера. С scrollbar-colorдругой стороны, мы можем стилизовать полосу прокрутки в соответствии с дизайном, не прибегая к повторному использованию функций браузера или использованию префиксов поставщиков.

.scrollable-element ( scrollbar-color: red yellow; )
Выбирайте нестандартные цвета

scrollbar-colorтакже принимает значения darkи lightв соответствии с предпочтениями пользователя, если они используют что-то вроде темного режима в Mac OSX.

.scrollable-element ( scrollbar-color: dark; )

По состоянию на март 2019 года, поддержка darkи lightзначения не доступны в любом браузере. поддерживается в Firefox. См. Подробности в разделе поддержки браузера ниже.

Синтаксис

scrollbar-color: auto | dark | light | ;

Значения

scrollbar-color принимает следующие значения:

  • auto является значением по умолчанию и будет отображать стандартные цвета полосы прокрутки для пользовательского агента.
  • dark скажет пользовательскому агенту использовать более темные полосы прокрутки для соответствия текущей цветовой схеме.
  • light скажет агенту пользователя использовать более светлые полосы прокрутки, чтобы соответствовать текущей цветовой схеме.
  • определяет два цвета, которые будут использоваться для полосы прокрутки. Первый цвет предназначен для «большого пальца» или подвижной части полосы прокрутки, которая появляется сверху. Второй цвет - для «дорожки» или фиксированной части полосы прокрутки.

Пример

Он сочетает в себе новый синтаксис спецификации и префикс WebKit.

Поддержка браузера

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

Рабочий стол

Хром Fire Fox IE Край Сафари
91 * 87 11 88 * TP *

Мобильный / планшет

Android Chrome Android Firefox Android iOS Safari
88 * Нет 81 * 14,0–14,4 *

Связанный

  • scrollbar-gutter
  • scrollbar-width
  • scrollbar

Ресурсы

  • Текущее состояние полос прокрутки стилей
  • Пользовательские полосы прокрутки в WebKit
  • Проект модуля CSSWG Scrollbars
  • Коллекция W3C вариантов использования для модификации полосы прокрутки
  • Будущее CSS: полосы прокрутки на dev.to
  • Хром, выпуск 891944