Информация в статье была обновлена в сентябре 2021 года
Нам часто задают вопрос: как настроить полосу прокрутки через CSS, в данной статье мы объясним как это сделать.
В сентябре 2018 года был выпущен проект W3C CSS Scrollbars, который является хорошим способом стилизации скроллбара под ваши нужды.
В настоящее время существует две основных спецификации, зависящих от браузера:
- Chrome/Edge/Safari используют -webkit-scrollbar
- Firefox использует новую спецификацию CSS Scrollbars API (scrollbar-color и scrollbar-width).
Понятно, что для кроссбраузерности необходимо использовать обе.
Полоса прокрутки состоит из двух частей дорожки (scrollbar track) и ползунка (scrollbar thumb).
Дорожка — это основа полосы прокрутки, а ползунок — это то, что пользователь перетаскивает для прокрутки страницы или раздела.
Следует учитывать, что полоса прокрутки может работать как вертикально, так и горизонтально, в зависимости от дизайна. Кроме того, она будет менять положение при работе с многоязычным веб-сайтом, который работает как слева направо (LTR), так и справа налево (RTL).
Скроллбары в Chrome/Edge/Safari/Opera/Yandex/Vivaldi/Brave/Avast
В браузерах Chrome/Edge/Safari/Opera/Yandex/Vivaldi/Brave/Avast для оформления полосы прокрутки доступны css-свойства с префиксом -webkit-scrollbar
Ширина полосы прокрутки
Сначала нам нужно определить толщину полосы прокрутки. Это ширина вертикальных полос прокрутки и высота горизонтальных.
.section::-webkit-scrollbar { width: 10px; }
С этим набором мы можем стилизовать саму полосу прокрутки.
Дорожка полосы прокрутки (scrollbar track)
Это основа скроллбара. Мы можем изменить ее, добавив границы, фон, тени, радиус скругления.
.section::-webkit-scrollbar-track { background-color: #333; }
Ползунок полосы прокрутки (scrollbar thumb)
Кроме дорожки, мы можем стилизовать и ползунок полосы прокрутки. Пользователь будет перетаскивать этот ползунок, для взаимодействия с полосой прокрутки.
.section::-webkit-scrollbar-thumb { box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2); }
Это старый способ оформления полосы прокрутки в CSS. При его использовании код будет невалидным, но для браузеров на базе Chromium или WebKit другого решения на данный момент не существует.
Внутренняя структура, расположение и конфигурация полос прокрутки, а также точный контроль над их окраской не являются каноничными. Это связано с тем, что разные платформы имеют разные структуры полос прокрутки и соглашения о стилях, а операционные системы постоянно совершенствуют свои конструкции скроллбаров, чтобы обеспечить лучший пользовательский интерфейс. Были рассмотрены и отклонены псевдоэлементы для выбора определенных частей полосы прокрутки. Хотя такой уровень тонкого контроля очень заманчив для веб-мастеров. Предоставление слишком больших возможностей позволило бы авторам получать идеальные результаты на одних платформах, но за счет плохих результатов на других.
Примечание: Предоставление ::-webkit-псевдо-элементов с префиксами, связанными с полосой прокрутки, в интернете считается ошибкой как рабочей группой CSS, так и Webkit.
Скроллбары в Firefox
Firefox построен на движке Quantum и является чемпионом в использовании новых стандартов W3C, они всегда первыми внедряют новые API. Поэтому, новые функции CSS Scrollbars уже доступны как в Firefox Developer Edition, так и в обычных выпусках Firefox и Tor:
scrollbar-width: thin; (только "auto" "thin" "none") scrollbar-color: red grey; (цвет ползунка и дорожки скролла)
Этот новый синтаксис очень прост, но он сильно ограничивает возможности оформления.
Вариантов ширины полосы прокрутки всего три:
- "auto" – ширина полосы определяется автоматически из настроек платформы;
- "thin" – более тонкая полоса прокрутки, чем авто;
- "none" – полоса прокрутки не отображается, однако на возможность прокрутки элемента другими способами это не влияет.
Для указания цвета полосы и ползунка используются только сплошные цвета. Нельзя добавить тени, градиенты, закругленные края и т.п. Первым указывается цвет ползунка, вторым – цвет полосы. Можно использовать вариант "auto", тогда цвета будут установлены автоматически.
Определение области пользовательской полосы прокрутки
Важно знать, где настроить полосу прокрутки. Вы хотите, чтобы стиль был универсальным и работал для всех полос прокрутки на веб-сайте? Или вы хотите настроить ее только для определенных разделов?
Вы можете писать селекторы, не прикрепляя их к элементу, тогда они будут применяться ко всем прокручиваемым элементам на сайте.
::-webkit-scrollbar { width: 8px;}
* {scrollbar-width: thin;}
Если же вы хотите изменить вид скроллбара только на определенной странице, вам нужно добавить элемент перед селекторами.
.section::-webkit-scrollbar { width: 8px;}
.section {scrollbar-width: thin;}
Последняя редакция от 09 сентября 2021 года
