Руководство по стилизации полосы прокрутки в 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, вы сможете придать полосам прокрутки одинаковый вид.
Заключение
Стилизация полосы прокрутки придаёт сайту более совершенный вид. Она также может помочь выделить бренд или продукт, включив его цветовую схему или логотип в дизайн полосы прокрутки. Однако рекомендуется не слишком далеко отходить от первоначального вида полосы прокрутки, чтобы не сделать её непривычной для пользователей и не снизить удобство пользования. Надеюсь, вам понравилась эта статья. Счастливого кодинга!