Все статьи | Блог студента

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

Статья написана студентом Хекслета. Мнение автора может не совпадать с позицией редакции
Кастомный скроллбар на CSS главное изображение

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

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

enter image description here


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

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

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

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

Раз

Два

Три

Аватар пользователя Александр Ковалец
Александр Ковалец 06 августа 2021
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Python-разработчик
Профессия
Разработка веб-приложений на Django
8 декабря 8 месяцев
Иконка программы PHP-разработчик
Профессия
Разработка веб-приложений на Laravel
8 декабря 8 месяцев
Иконка программы Node.js-разработчик
Профессия
Разработка бэкенд-компонентов веб-приложений
8 декабря 8 месяцев
Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев
Иконка программы Java-разработчик
Профессия
Разработка приложений на языке Java
8 декабря 10 месяцев
Иконка программы Разработчик на Ruby on Rails
Профессия
Новый
Создает веб-приложения со скоростью света
8 декабря 5 месяцев