Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.
Хочу сразу объяснить: у скроллбара есть track и thumb. Их отличие вы можете увидеть на этой картинке:
Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.
• The Scrollbar Width
Определяет размер скроллбара. Для горизонтальных скроллбаров используйте width, а для вертикальных - height.
.section::-webkit-scrollbar {
width: 10px;
}
• The Scrollbar Track
Вся полоса прокрутки полностью (смотри скрин выше). Мы можем стилизовать это с помощью background colors, shadows, border-radius, и borders.
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
• The Scrollbar Thumb
Очень важно также не забыть стилизовать ползунок, так как именно с ним будут взаимодействовать пользователи.
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
• The Scrollbar Width
Здесь, в отличие от Webkit, мы не можем указывать числа. Больше всего мы будем оперировать со значениями auto и thin.
.section {
scrollbar-width: thin;
}
• Scrollbar Color
С помощью этого свойства мы можем указать цвета как для полосы прокрутки, так и для ползунка.
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
Необязательно указывать вид скроллбара для всех тегов/классов, мы можем задать это глобально:
• Старый синтаксис
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
• Новый синтаксис
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
Некоторые примеры, чтобы вам было проще разобраться:
• Раз
• Два
• Три