Статьи

Современный способ оформления полосы прокрутки

Информация в статье была обновлена в сентябре 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 другого решения на данный момент не существует.

Внутренняя структура, расположение и конфигурация полос прокрутки, а также точный контроль над их окраской не являются каноничными. Это связано с тем, что разные платформы имеют разные структуры полос прокрутки и соглашения о стилях, а операционные системы постоянно совершенствуют свои конструкции скроллбаров, чтобы обеспечить лучший пользовательский интерфейс. Были рассмотрены и отклонены псевдоэлементы для выбора определенных частей полосы прокрутки. Хотя такой уровень тонкого контроля очень заманчив для веб-мастеров. Предоставление слишком больших возможностей позволило бы авторам получать идеальные результаты на одних платформах, но за счет плохих результатов на других.

Скроллбары в 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 года

Материалы по теме

Информация

Сайт проекта Эффективные интернет технологии рассматривает различные аспекты технологического развития.

Вы можете прислать свои статьи, исследования, замечания и пожелания через форму обратной связи.

Счетчики