Узнать, как создать полосу прокрутки используя 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
перетаскиваемый маркер изменения размера, который отображается в нижнем углу некоторых элементов.