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

Модуль стилизации полос прокрутки CSS определяет свойства, которые можно использовать для визуального оформления полос прокрутки. Вы можете настраивать ширину полосы прокрутки по мере необходимости. Также можно настроить цвет дорожки полосы прокрутки (track), который является фоном полосы прокрутки, и цвет ползунка (thumb) полосы прокрутки, который представляет собой перетаскиваемый элемент управления.

Пример стилизации полосы прокрутки

В этом примере определена тонкая полоса прокрутки с красным ползунком и оранжевой дорожкой. Чтобы увидеть ползунок, вам необходимо прокрутить текст. После того, как полоса прокрутки станет видимой, наведите указатель мыши на неё, чтобы увидеть дорожку.

.poem {
  overflow: scroll;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}

Примечание: При настройке полос прокрутки убедитесь, что ползунок и дорожка имеют достаточную контрастность с окружающим фоном. Также убедитесь, что область нажатия полосы прокрутки достаточно велика для людей, использующих сенсорный ввод.

Справочник

Свойства CSS

Связанные понятия

overflow-block свойство CSS
overflow-inline свойство CSS
overflow-x свойство CSS
overflow-y свойство CSS
overflow сокращённое свойство CSS
overflow-clip-margin свойство CSS
scrollbar-gutter свойство CSS
scroll-behavior свойство CSS
scroll-margin сокращённое свойство CSS
scroll-padding сокращённое свойство CSS
scroll-snap-align свойство CSS
scroll-snap-stop свойство CSS
scroll-snap-type свойство CSS
::-webkit-scrollbar псевдоэлемент
контейнер прокрутки термин из глоссария
scrollbar роль ARIA

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

Спецификация
Модуль стилизации полос прокрутки CSS уровень 1

См. также

© 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/CSS_scrollbars_styling