scrollbar-width

Ограниченное использование

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

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

Цель свойства scrollbar-width — оптимизировать занимаемое полосой прокрутки пространство на странице или элементе; цель не связана с эстетикой полосы прокрутки. Значения предварительно определённых ключевых слов scrollbar-width указывают пользовательскому агенту, следует ли отображать обычную или более узкую полосу прокрутки. Избегайте использования none, так как скрытие полосы прокрутки негативно сказывается на доступности.

Примечание: Для элементов, которые прокручиваются только программным способом, а не путём прямого взаимодействия пользователя, используйте свойство overflow со значением hidden вместо scrollbar-width: none.

Синтаксис

/* Keyword values */
scrollbar-width: auto;
scrollbar-width: thin;
scrollbar-width: none;

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

Значения

auto: Значение по умолчанию для ширины полосы прокрутки на платформе.
thin: Вариант с тонкой полосой прокрутки на платформах, которые поддерживают эту опцию, или более тонкая полоса прокрутки, чем по умолчанию на платформе.
none: Полоса прокрутки не отображается, однако элемент всё ещё будет прокручиваться.

Примечание: Пользовательские агенты должны применять любое значение scrollbar-width, заданное для корневого элемента, к области просмотра.

Доступность

Используйте это свойство с осторожностью — установка scrollbar-width на thin или none может затруднить или сделать невозможной прокрутку содержимого, если автор не предоставляет альтернативный механизм прокрутки. Хотя жесты прокрутки или колёсико мыши могут включить прокрутку такого содержимого, некоторые устройства не имеют альтернатив прокрутки.

Критерий WCAG 2.1.1 (Клавиатура) существует уже давно, чтобы давать рекомендации по базовой доступности с помощью клавиатуры, и это должно включать прокрутку областей содержимого. А введенный в WCAG 2.1 критерий 2.5.5 (Размер цели) рекомендует, чтобы элементы управления для касания имели ширину и высоту не менее 44 пикселей (хотя проблема усугубляется на экранах высокого разрешения; рекомендуется тщательное тестирование).

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

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

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

scrollbar-width = 
  auto  |
  thin  |
  none

Примеры

Изменение размера полос прокрутки

CSS

.scroller {
  width: 300px;
  height: 100px;
  overflow-y: scroll;
  scrollbar-width: thin;
}

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 Модуль стилизации полос прокрутки Уровень 1 # scrollbar-width

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`scrollbar-width`	121	121	64	107	18.2	121	64	81	18.2	25.0	Нет
`auto`	121	121	64	107	18.2	121	64	81	18.2	25.0	Нет
`none`	121	121	64	107	18.2	121	64	81	18.2	25.0	Нет
`thin`	121	121	64	107	18.2	121	64	81	18.2	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-width