Кастомный скроллбар на CSS

Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.

• Кастомизация дизайна скроллбара
• Старый синтаксис
• Новый синтаксис
• Вид скроллбара для всего сайта
• Парочку примеров

Хочу сразу объяснить: у скроллбара есть track и thumb. Их отличие вы можете увидеть на этой картинке:

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Попробовать бесплатно

Кастомизация дизайна скроллбара

Раньше кастомизировать скроллбар можно было только для 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;
}

Парочку примеров

Некоторые примеры, чтобы вам было проще разобраться:

• Раз

• Два

• Три

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Попробовать бесплатно