Как сделать - Полосу прокрутки

Узнать, как создать полосу прокрутки используя HTML, CSS.

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

Примечание: пользовательские полосы прокрутки не поддерживаются в Firefox или Edge, до версии 79.

Создать полосу прокрутки

Chrome, Edge, Safari и Opera поддерживают нестандартный псевдоэлемент ::-webkit-scrollbar, который позволяет нам изменять внешний вид полоса прокрутки.

В следующем примере создается тонкая (шириной 10 пикселей) полоса прокрутки с серым цветом полосы/полосы и темно-серым (#888) маркером:

/* ширина */
::-webkit-scrollbar {
  ширина: 10 пикселей;
}

/* Дорожка */
::-webkit-scrollbar-track {
  фон: #f1f1f1;
}

/* Ручка */
::-webkit-scrollbar-thumb {
  фон: #888;
}

/* Ручка при наведении */
::-webkit-scrollbar-thumb:hover {
фон: #555;
}

Попробуйте сами »

Этот пример создает полосу прокрутки с тенью блока:

/* ширина */
::-webkit-scrollbar {
  ширина: 20 пикселей;
}

/* Трек */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5 пикселей серый;
  border-radius: 10px;
}

/* Ручка */
::-webkit-scrollbar-thumb {
фон: красный;
border-radius: 10px;
}

Попробуйте сами »

Селекторы полосы прокрутки

Для браузеров WebKit вы можете использовать следующие псевдоэлементы для настройки полосы прокрутки браузера:

::-webkit-scrollbar полоса прокрутки.
::-webkit-scrollbar-button кнопки на полосе прокрутки (стрелки, направленные вверх и вниз).
::-webkit-scrollbar-thumb перетаскиваемый маркер прокрутки.
::-webkit-scrollbar-track трек (индикатор выполнения) полосы прокрутки.
::-webkit-scrollbar-track-piece трек (индикатор выполнения), НЕ закрытый маркером.
::-webkit-scrollbar-corner нижний угол полосы прокрутки, где встречаются горизонтальная и вертикальная полосы прокрутки.
::-webkit-resizer перетаскиваемый маркер изменения размера, который отображается в нижнем углу некоторых элементов.

❮ Назад Далее ❯

Сообщить об ошибке

Перевод страницы