Руководство по стилизации скроллбара (полосы прокрутки) в CSS
Полоса прокрутки или скроллбар браузера по умолчанию в большинстве случаев работает хорошо. Однако, если оставить её как есть, даже самые красивые сайты могут выглядеть незавершёнными и неотшлифованными. С помощью стилизации скроллбара можно создать более визуально привлекательный сайт, который будет лучше соответствовать вашему бренду или дизайну. В этом руководстве мы рассмотрим несколько различных способов стилизации скроллбара в CSS.
Знакомство со скроллбаром
Скроллбар — это часто упускаемый из виду элемент веб-дизайна. Хотя она может показаться незначительной деталью, она играет важную роль в навигации сайта. Стандартный скроллбар часто бывает скучной и может выглядеть неуместно, нарушая общую эстетику. К счастью, вы можете легко настроить скроллбар с помощью CSS. Для этого потребуется написать два набора правил CSS для браузеров Webkit, таких, как Chrome, Edge, Safari и Firefox.
Прежде чем погрузиться в код, давайте убедимся, что мы понимаем структуру скроллбара. Знание этого поможет при создании стиля с помощью CSS, так как вы можете использовать различные свойства для выделения определённых частей полосы прокрутки (скроллбара). Ниже перечислены элементы, из которых состоит скроллбар:
- Бегунок: Подвижная часть скроллбара, представляющая текущую позицию содержимого. Его можно нажать и перетащить для прокрутки содержимого вверх или вниз.
- Дорожка: Область скроллбара, по которой перемещается бегунок. Она представляет собой всю длину содержимого.
- Кнопки со стрелками: Расположенные в верхней и нижней части дорожки скроллбара, кнопки со стрелками можно нажимать для прокрутки содержимого.
- Границы скроллбара: Линии, которые окружают элемент скроллбара.
- Угол скроллбара: Пересечение между вертикальным и горизонтальным скроллбарами, когда оба присутствуют.
Стилизация скроллбара в Chrome, Edge и Safari
Браузеры Webkit позволяют настраивать скроллбар с помощью псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-button, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track и других. Каждый из них нацелен на различные части скроллбара, как указано выше. В CodePen ниже показан пример стилизованного скроллбара с использованием вышеуказанных псевдоэлементов:
В приведённом выше коде мы отобразили вертикальный и горизонтальный скроллбары, но в большинстве случаев мы отобразили бы только одну. Для этого мы можем изменить свойство overflow, которое отвечает за видимость скроллбара, на overflow-x или overflow-y, в зависимости от того, по какой оси мы будем отображать скроллбар. Однако для приведённого выше примера этого будет недостаточно, если мы не сделаем изображение отзывчивым, установив его ширину и высоту на 100%.
Селекторы псевдокласса скроллбара
Чтобы создать более индивидуальный дизайн, вы можете выбрать определённые элементы скроллбара и применить к ним стили, добавив псевдокласс к каждому псевдоэлементу. Ниже приведены некоторые из наиболее распространённых псевдоклассов:
:horizontal: Используется для придания стиля горизонтальному скроллбару, отличного от вертикального скроллбара. Например, вы можете задать другую ширину или цвет для горизонтальной скроллбара.:vertical: Используется для стилизации в CSS вертикального скроллбара, отличной от горизонтального скроллбара.:decrement: Применяется к кнопкам со стрелками в начале скроллбара. Используется для стилизации кнопки уменьшения или стрелки вверх для вертикального скроллбара и стрелки влево для горизонтального скроллбара.:increment: Применяется к кнопке со стрелкой в конце скроллбара. Используется для стилизации кнопки увеличения или стрелки вниз для вертикального скроллбара и стрелки вправо для горизонтального скроллбара.:start: Применяется к первым кнопкам и первому фрагменту дорожки скроллбара, которые находятся в верхней или левой части вертикального или горизонтального скроллбара соответственно:end: Применяется к последнему фрагменту дорожки скроллбара, которые находятся внизу или справа вертикального, или горизонтального скроллбара, соответственно.
Ниже приведён пример, в котором используются все вышеперечисленные псевдоклассы, кроме :horizontal, чтобы придать вертикальному скроллбару другой вид:
В примере ниже используется псевдокласс :horizontal для вставки тени на дорожку горизонтального скроллбара:
Хотя спецификации Webkit для стилизации скроллбара работают нормально на момент написания статьи, W3C официально отказался от этой спецификации, и ожидается, что она будет постепенно выводиться из употребления.
Стилизация скроллбара в Firefox
Firefox не предлагает никаких продвинутых методов стилизации, как браузеры Webkit. На момент написания статьи доступны только свойства scrollbar-width и scrollbar-color, что является стандартом, определённым W3C CSS Scrollbars. Эти свойства можно использовать для стилизации ширины скроллбара, бегунка и цвета дорожки:
body {
scrollbar-width: thin;
scrollbar-color: #4d7fff #ddd;
}Стилизация скроллбара для большей поддержки кроссбраузерности
При оформлении скроллбара рекомендуется комбинировать спецификации Webkit и W3C CSS Scrollbars, чтобы охватить большее количество браузеров:
body {
scrollbar-width: thin;
scrollbar-color: #4d7fff #ddd;
}
body::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%);
border-radius: 5px;
}
body::-webkit-scrollbar-track {
background-color: #ddd;
border: 1px solid #ccc;
}
body::-webkit-scrollbar-button {
background-color: #4d7fff;
border-radius: 5px;
}В браузерах WebKit правила, которые не распознаны, будут проигнорированы, и браузеры будут применять правила -webkit-scrollbar. С другой стороны, в браузерах Firefox правила, которые не распознаются, также будут игнорироваться, и браузеры будут применять правила CSS правила скроллбара. Таким образом, скроллбар сохранит свой стиль в большем количестве браузеров. Хотя недостатком является то, что в Firebox нет продвинутых методов стилизации, как в Webkit, вы сможете придать скроллбарам одинаковый вид.
Заключение
Стилизация скроллбара придаёт сайту более совершенный вид. Она также может помочь выделить бренд или продукт, включив его цветовую схему или логотип в дизайн скроллбара. Однако рекомендуется не слишком далеко отходить от первоначального вида скроллбара, чтобы не сделать её непривычной для пользователей и не снизить удобство пользования. Надеюсь, вам понравилась эта статья. Счастливого кодинга!