Как сделать - Пользовательскую полосу прокрутки
Узнать, как создать пользовательскую полосу прокрутки с помощью CSS.
Пользовательская полоса прокрутки
Пользовательские полосы прокрутки являются нет поддерживается в Firefox или IE / Edge.
Создать пользовательскую полосу прокрутки
Браузеры Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартные ::-webkit-scrollbar псевдо-элемент, который позволяет нам изменять внешний вид полосы прокрутки браузера.
В следующем примере создается тонкая полоса прокрутки (шириной 10 пикселей), которая имеет серый цвет дорожки/полосы и темно-серый (#888) маркер:
Пример
/* Ширина */
::-webkit-scrollbar {
width: 10px;
}
/* Дорожка */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Ручка */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Ручка при наведении */
::-webkit-scrollbar-thumb:hover {
background: #555;
}Редактор кода »В этом примере создается полоса прокрутки с тенью окна:
Пример
/* Ширина */
::-webkit-scrollbar {
width: 20px;
}
/* Дорожка */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
/* Ручка */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}Редактор кода »Селекторы полосы прокрутки
Для браузеров webkit можно использовать следующие псевдо-элементы для настройки полосы прокрутки браузера:
::-webkit-scrollbarполоса прокрутки.::-webkit-scrollbar-buttonкнопки на полосе прокрутки (стрелки, указывающие вверх и вниз).::-webkit-scrollbar-thumbперетаскиваемая ручка прокрутки.::-webkit-scrollbar-trackдорожка (индикатор выполнения) полосы прокрутки.::-webkit-scrollbar-track-pieceдорожка (индикатор выполнения) не покрыта ручкой.::-webkit-scrollbar-cornerнижний угол полосы прокрутки, где встречаются горизонтальные и вертикальные полосы прокрутки.::-webkit-resizerперетаскиваемый маркер изменения размера, который появляется в нижнем углу некоторых элементов.
