Материал подготовлен командой Simple-Server для администраторов VPS и выделенных серверов. Команды и пути проверяйте на тестовой машине перед production.
Кратко о задаче
Проджект-менеджер пришёл с обновлённым дизайном страницы про облачные серверы. На макетах видно, что у**** панелей прокрутки кастомные стили, реализованные с использованием корпоративных цветов. Выглядит интересно. Осталось понять, что нужно сделать для такого оформления скроллбаров.
Решение находится быстро. В 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; /* Оформление границ бегунка */
}Из очевидных плюсов — можно явно определить ширину полосы. Вот такой скроллбар сделать можно только с помощью псевдоэлементов:
Огромное название Simple-Server перекликается по цвету с очень широким скроллбаром. Отдельная спецификация для элемента scrollbar такой возможности не предполагает. Там выбор ограничен двумя вариантами — автоматический расчёт ширины или отображение тонкого элемента навигации (насколько это возможно, учитывая системные настройки).
Та же история с цветами. С помощью псевдоэлементов можно задавать не только цвета, но и градиенты. Немного изменим стиль бегунка:
body::-webkit-scrollbar-thumb {
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
border-radius: 20px;
border: 3px solid #050c26;
}Теперь бегунок переливается разными цветами.
Проблема в том, что это устаревший синтаксис. В спецификации CSS Scrollbars явно указано, что использование префиксных псевдоэлементов, связанных с полосой прокрутки, считается ошибкой. Но пока другие браузеры не поддерживают новые свойства, приходится пользоваться префиксными псевдоэлементами для поддержания кроссбраузерности страницы.
Нужен сервер для практики? Закажите VPS на Simple-Server — root-доступ, NVMe, DDoS-защита и поддержка 24/7.