Весенние скидки до 30 000 ₽
На все профессии до 31 марта
Главная | Все статьи | Дневник студента

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

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

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

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

enter image description here


Профессия «Фронтенд-разработчик»
  • Изучите востребованные 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
Попробовать бесплатно

Аватар пользователя Александр Ковалец
Александр Ковалец 06 августа 2021
1
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 025 ₽ в месяц
новый
Сбор, анализ и интерпретация данных
9 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 4 апреля
профессия
от 5 840 ₽ в месяц
Создание веб-приложений со скоростью света
5 месяцев
c опытом
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 4 апреля
профессия
Верстка с использованием последних стандартов CSS
5 месяцев
с нуля
Старт в любое время