Настройка полосы прокрутки в CSS

Полосу прокрутки можно стилизовать: сделать узкой или широкой, изменить цвет, скрыть. Это достаточно простая задача, но при её решении возникают подводные камни, связанные с кроссбраузерностью. Давайте разбираться, как сделать кастомный скроллбар правильно.

Постановка задачи

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

Решение находится быстро. В 2018 году появилась спецификация CSS Scrollbars, которая определяет настройку внешнего вида полосы. Этой спецификацией введены два новых свойства, которые влияют на визуальный стиль скроллбара:

• scrollbar-color — для управления цветом;
• scrollbar-width — для управления шириной.

Кажется, стилизации скроллбаров теперь делается за пять минут. Осталось проверить это на практике.

Применение свойств CSS Scrollbars

Прежде чем разбираться, как стилизовать полосы прокрутки, давайте посмотрим, из чего они состоят. Операционная система и браузер значения не имеют. Все скроллбары имеют как минимум два элемента:

• бегунок (thumb), за который мы тянем, чтобы прокрутить страницу;
• дорожка (track), по которой перемещается бегунок.

Попробуем применить к ним свойства для стилизации внешнего вида. Сначала разберёмся с шириной элемента. У scrollbar-width три возможных значения:

• auto — ширина по умолчанию;
• thin — тонкая полоса;
• none — скрытие полосы.

Указать ширину элемента в пикселях или процентах нельзя. Это ограничение введено для того, чтобы сохранять согласованность в отображении элементов управления в разных браузерах и ОС. Или, проще говоря, чтобы исключить зоопарк кастомных решений, который может запутать пользователей.

Свойство scrollbar-color принимает на вход два значения. Первое — цвет бегунка, второе — цвет дорожки. По умолчанию задано значение auto, которое говорит браузеру, что нужно использовать дефолтные параметры.

Соединим оба свойства и получим такую стилизацию:

  

    

  
  body {
  scrollbar-width: thin;
  scrollbar-color: green black;
}

Выглядит очень просто. Проверяем в браузере Firefox. 

Всё работает, полоса для скролла на странице стала чёрно-зелёной и тонкой.

Поддержка кроссбраузерности

В тестовой среде стилизация скролла с помощью scrollbar-color и scrollbar-width выглядит отлично. Но перед отправкой в продакшн нужно проверить кроссбраузерность — не все же пользуются Firefox.

Открываем стилизованную страницу в Google Chrome и видим, что полоса прокрутки осталась дефолтной. В Edge и Safari — тот же результат. Чтобы проверить свои подозрения, смотрим поддержку свойств CSS Scrollbars через Can I Use. Ситуация печальная. Спустя четыре года после представления спецификации удобная настройка полосы прокрутки недоступна в большинстве браузеров. Исключение — десктопная и мобильная версии Firefox.

Это что же, у нас не получится реализовать отрисованный дизайн и придётся всё менять? 

Спокойно, решение есть. Для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы:

• ::-webkit-scrollbar — параметры всего элемента навигации;
• ::-webkit-scrollbar-track — параметры дорожки.
• ::webkit-scrollbar-thumb — параметры бегунка.

Использование псевдоэлементов выглядит как костыль. Но делать нечего, добрасываем стили для кроссбраузерности:

  

    

  
  body::-webkit-scrollbar {
  width: 15px; /* Ширина всего элемента навигации */
}

body::-webkit-scrollbar-track {
  background: #fff; /* Цвет дорожки */
}

body::-webkit-scrollbar-thumb {
  background-color: #050c26; /* Цвет бегунка */
  border-radius: 20px; /* Округление бегунка */
  border: 3px solid #050c26; /* Оформление границ бегунка */
}

Из очевидных плюсов — можно явно определить ширину полосы. Вот такой скроллбар сделать можно только с помощью псевдоэлементов:

Огромное название Timeweb Cloud перекликается по цвету с очень широким скроллбаром. Отдельная спецификация для элемента scrollbar такой возможности не предполагает. Там выбор ограничен двумя вариантами — автоматический расчёт ширины или отображение тонкого элемента навигации (насколько это возможно, учитывая системные настройки).

Та же история с цветами. С помощью псевдоэлементов можно задавать не только цвета, но и градиенты. Немного изменим стиль бегунка:

  

    

  
  body::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #EECFBA, #C5DDE8);
  border-radius: 20px;
  border: 3px solid #050c26;
}

Теперь бегунок переливается разными цветами.

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

Заключение

Для создания стилей панелей прокрутки пока приходится использовать оба подхода — если, конечно, вам дорога кроссбраузерность. Но при добавлении псевдоэлементов держите в голове, что, возможно, скоро их использование станет неактуальным. По современным стандартам это не лучшее решение для стилизации скроллбара. Но кроме стандартов есть ещё производственная необходимость, которая заставляет идти на разные компромиссы.