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

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

Хочу сразу объяснить: у скроллбара есть track и thumb

Содержание

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

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

Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React

от 6 744 ₽

Посмотреть →

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах

от 3 900 ₽

Посмотреть →

1 месяц·Для продвинутых

Позиционирование в CSS

Получите навык работы с CSS и адаптивными интерфейсами

от 3 900 ₽

Посмотреть →

1 месяц·Для продвинутых

SASS

Освоите препроцессор SASS и стилизацию веб-приложений

от 3 900 ₽

Посмотреть →

1 месяц·Для продвинутых

Анимация CSS

Освоите CSS-анимации для улучшения UX

от 3 900 ₽

Посмотреть →

Каталог

Полный список доступных курсов по разным направлениям

Старый синтаксис

• 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;
}

3 причины, почему за курсы на Хекслет не жалко отдать свои кровные

Если вы колеблетесь, стоит ли вам начинать учиться на Хекслете — то эта заметка для вас.

20 сентября 2021 г.

Посмотреть →

С какого языка программирования начать?

Короткий гайд, если сделать выбор очень сложно.

30 августа 2021 г.

Посмотреть →

Стереотипы про программистов со стороны программиста

Вряд ли у вас в голове есть какой-то набор стереотипов про работников завода/маркетологов/кальянщ...

6 августа 2021 г.

Посмотреть →

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

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

• Раз

• Два

• Три