Руководство по стилизации скроллбара (полосы прокрутки) в CSS

Источник: «Guide to styling CSS scrollbars»
В этой статье мы рассмотрим несколько способов стилизации скроллбара в 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 ниже показан пример стилизованного скроллбара с использованием вышеуказанных псевдоэлементов:

See the Pen

В приведённом выше коде мы отобразили вертикальный и горизонтальный скроллбары, но в большинстве случаев мы отобразили бы только одну. Для этого мы можем изменить свойство overflow, которое отвечает за видимость скроллбара, на overflow-x или overflow-y, в зависимости от того, по какой оси мы будем отображать скроллбар. Однако для приведённого выше примера этого будет недостаточно, если мы не сделаем изображение отзывчивым, установив его ширину и высоту на 100%.

Селекторы псевдокласса скроллбара

Чтобы создать более индивидуальный дизайн, вы можете выбрать определённые элементы скроллбара и применить к ним стили, добавив псевдокласс к каждому псевдоэлементу. Ниже приведены некоторые из наиболее распространённых псевдоклассов:

Ниже приведён пример, в котором используются все вышеперечисленные псевдоклассы, кроме :horizontal, чтобы придать вертикальному скроллбару другой вид:

See the Pen

В примере ниже используется псевдокласс :horizontal для вставки тени на дорожку горизонтального скроллбара:

See the Pen

Хотя спецификации 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, вы сможете придать скроллбарам одинаковый вид.

Заключение

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

Дополнительные материалы

Предыдущая Статья

PHP 8.3: PHP CLI Lint (php -l) проверка нескольких файлов

Следующая Статья

PHP 8.3: class_alias() создание псевдонимов встроенных классов