scrollbar-color

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает в некоторых из наиболее широко используемых браузеров.

Свойство scrollbar-color CSS задаёт цвет области прокрутки и ползунка.

Область (track) — это фон прокрутки, который обычно остается неизменным независимо от положения прокрутки.

Ползунок (thumb) — это подвижная часть прокрутки, обычно расположенная поверх области.

Когда значение scrollbar-color задаётся на корневом элементе документа, значения применяются к полосам прокрутки области просмотра.

Синтаксис

/* Keyword values */
scrollbar-color: auto;

/* <color> values */
scrollbar-color: rebeccapurple green; /* Two valid colors.
The first applies to the thumb of the scrollbar, the second to the track. */

/* Global values */
scrollbar-color: inherit;
scrollbar-color: initial;
scrollbar-color: revert;
scrollbar-color: revert-layer;
scrollbar-color: unset;

Значения

<scrollbar-color>

Определяет цвет полосы прокрутки.

`auto`	Значение, используемое по умолчанию для рендеринга области прокрутки (track) браузером в отсутствие других свойств цвета прокрутки.
`<color> <color>`	Применяет первый цвет к ползунку прокрутки (thumb), а второй — к области прокрутки (track).

Примечание: @media (forced-colors: active) устанавливает scrollbar-color на auto.

Доступность

При использовании свойства scrollbar-color со специфическими значениями цвета, авторы должны убедиться, что указанные цвета имеют достаточную контрастность. Для ключевых значений браузеры должны гарантировать достаточную контрастность цветов. Смотрите Методы для WCAG 2.0: G183: Использование отношения контрастности 3:1.

Формальное определение

Начальное значение	`auto`
Применяется к	рамкам прокрутки
Наследуется	да
Вычисленное значение	как указано
Тип анимации	по типу вычисленного значения

Формальный синтаксис

scrollbar-color = 
  auto        |
  <color>{2}

Примеры

Окраска полос прокрутки

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-color: #007 #bada55;
}

HTML

<div class="scroller">
  Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion
  daikon amaranth tatsoi tomatillo melon azuki bean garlic. Gumbo beet greens
  corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts
  fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber
  earthnut pea peanut soko zucchini.
</div>

Результат

Спецификации

Спецификация
CSS Scrollbars Styling Module Level 1 # scrollbar-color

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`scrollbar-color`	121	121	64	107	Нет	121	64	81	Нет	25.0	Нет
`auto`	121	121	64	107	Нет	121	64	81	Нет	25.0	Нет

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color