CSS: пользовательский скроллбар
управляем дизайном полосы прокрутки с помощью CSS
Вы считаете, что дизайн полосы прокрутки нельзя изменить?
С помощью псевдоэлементов ::-webkit-scrollbar
, ::-webkit-scrollbar-track
, ::-webkit-scrollbar-thumb
можно переделать скроллбар в соответствии с требованиями к дизайну сайта:
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Настраиваемая полоса прокрутки работает в браузерах на основе WebKit (например, Chrome и Safari). Можно настроить её цвет и размеры так, чтобы они идеально соответствовали общему стилю страниц.
Помните: несмтроя на то что этот CSS-трюк отлично подходит для WebKit, другие браузеры могут не поддерживать используемые псевдоэлементы. Чтобы достичь единообразия пользовательских интерфейсов, необходимо проверять такой код во всех браузерах.
Спасибо за внимание.