scrollbar — color
scrollbar — color позволяет изменять цвета полосы прокрутки и ползунка.
На данный момент scrollbar — color очень слабо поддерживается браузерами (Can I Use). Свойство будет работать только в Firefox и Google Chrome выше 121 версии.
Если вы используете любой другой браузер, то scrollbar — color не сработает. Поэтому под каждым демо мы добавим картинку того, как это выглядит в Firefox.
Если используете MacOS, вам нужно в настройках ОС поставить галочку «всегда отображать скроллбар», иначе полоса прокрутки будет отображаться некорректно.
Пример
Скопировать ссылку «Пример» Скопировано
Изменим цвет ползунка и самой полосы скроллбара.
html scrollbar-color: #2E9AFF #F498AD;>html scrollbar-color: #2E9AFF #F498AD; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Свойство принимает два цвета — первый задаёт цвет ползунка, а второй — цвет фона контейнера. Указать только один цвет не получится (даже если хотите сделать цвет фона и ползунка одинаковым) — будет синтаксическая ошибка. Можно указывать любые корректные значения цвета.
Вот так можно задать ползунку цвет #2 E9 A F F , а фону — # F498 A D .
html scrollbar-color: #2E9AFF #F498AD;>html scrollbar-color: #2E9AFF #F498AD; >
Также можно задавать разные цвета для скроллбаров в разных блоках, причём стилизуются как вертикальные, так и горизонтальные скроллбары.
Обратите внимание, что скроллбар с жёлтым фоном создаёт вертикальную и горизонтальную полосу, а с фиолетовым — только вертикальную. Это связано с тем, что для блока-контейнера (жёлтый фон) мы задали overflow : scroll , а для внутреннего блока — overflow — y : scroll . Поэтому у внутреннего блока появился фон только для вертикальной прокрутки, а для контейнера — сразу для вертикальной и горизонтальной.
Кастомный скроллбар на CSS
Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.
- Кастомизация дизайна скроллбара
- Старый синтаксис
- Новый синтаксис
- Вид скроллбара для всего сайта
- Парочку примеров
Хочу сразу объяснить: у скроллбара есть track и thumb. Их отличие вы можете увидеть на этой картинке:
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Кастомизация дизайна скроллбара
Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.
Старый синтаксис
• The Scrollbar Width
Определяет размер скроллбара. Для горизонтальных скроллбаров используйте width, а для вертикальных — height.
• The Scrollbar Track
Вся полоса прокрутки полностью (смотри скрин выше). Мы можем стилизовать это с помощью background colors, shadows, border-radius, и borders.
• The Scrollbar Thumb
Очень важно также не забыть стилизовать ползунок, так как именно с ним будут взаимодействовать пользователи.
Новый синтаксис
• The Scrollbar Width
Здесь, в отличие от Webkit, мы не можем указывать числа. Больше всего мы будем оперировать со значениями auto и thin.
• Scrollbar Color
С помощью этого свойства мы можем указать цвета как для полосы прокрутки, так и для ползунка.
Вид скроллбара для всего сайта
Необязательно указывать вид скроллбара для всех тегов/классов, мы можем задать это глобально:
• Старый синтаксис
::-webkit-scrollbar-track < background-color: darkgrey; >::-webkit-scrollbar-thumb
• Новый синтаксис
Парочку примеров
Некоторые примеры, чтобы вам было проще разобраться:
Профессия «Фронтенд-разработчик»
- Изучите востребованные JavaScript и TypeScript
- Научитесь создавать пользовательские интерфейсы сайтов и приложений
- Освойте самый популярный фреймворк JavaScript — React
- Познакомьтесь с языками веб-разработки HTML и CSS
Как поменять ширину скролла? Css и с плагинам не получается. Что получается видно на картинке, только зеленый скролл нужно шириной 52px
Всё работает как надо. Просто Вы задаёте обертке ширину, ей же стилизацию скроллов, но при этом эти скроллы там никогда не появятся. Показывается внешний скролл, стили которого не определены.
В примере ниже показано, как работает стилизация скроллов (только Chromium-подобные браузеры), если таблица имеет размеры большие, чем обертка:
.table < width: 1570px; height: 250px; overflow-x: auto; >.table::-webkit-scrollbar < height: 4px; width: 52px; >.table::-webkit-scrollbar-track < background: rgb(194, 192, 190); >.table::-webkit-scrollbar-thumb < background-color: green; border-radius: 5px; >.table-body
1 1 1 1 1 1 2 2 2 2 2 2
Руководство по стилизации скроллбара (полосы прокрутки) в CSS
В этой статье мы рассмотрим несколько способов стилизации скроллбара в 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, вы сможете придать скроллбарам одинаковый вид.
Заключение
Стилизация скроллбара придаёт сайту более совершенный вид. Она также может помочь выделить бренд или продукт, включив его цветовую схему или логотип в дизайн скроллбара. Однако рекомендуется не слишком далеко отходить от первоначального вида скроллбара, чтобы не сделать её непривычной для пользователей и не снизить удобство пользования. Надеюсь, вам понравилась эта статья. Счастливого кодинга!