CSS-свойство `scrollbar-width`

Базовая поддержка Недавно стало доступно

Эта функция работает в последних версиях устройств и браузеров. Она может не работать на старых устройствах или в старых версиях браузеров. Она доступна во всех браузерах с декабря 2024 года.

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

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

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

Примечание: Браузеры игнорируют нестандартное семейство псевдоэлементов ::-webkit-scrollbar для любого элемента, вычисленное значение свойства scrollbar-width которого отличается от auto. В отличие от scrollbar-color, свойство scrollbar-width не наследуется, поэтому значение предка не влияет на его потомков. Установка свойства scrollbar-width: auto для элемента восстанавливает его стилизацию ::-webkit-scrollbar-*. См. раздел Добавление резервного варианта для стилей полосы прокрутки.

Синтаксис

/* 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 пикселей в ширину и высоту (хотя на экранах с высоким разрешением проблема усугубляется; рекомендуется тщательное тестирование).

MDN: пояснения к руководству WCAG 2.1
MDN: пояснения к руководству WCAG 2.5
[Понимание критерия успеха 2.1.1 W3C: понимание WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/keyboard)
[Понимание критерия успеха 2.5.5 W3C: понимание WCAG 2.1](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html)

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

Начальное значение	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 Scrollbars Styling, уровень 1 # scrollbar-width

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

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

См. также

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