Стилизация полосы прокрутки в CSS
В сентябре 2018 года Консорциум Всемирной паутины W3C CSS Scrollbars определил спецификации для настройки внешнего вида полос прокрутки с помощью CSS.
По состоянию на 2021 год 96% интернет-пользователей используют браузеры, поддерживающие CSS-стили для полосы прокрутки. Однако при настройке стилей нужно написать два набора правил CSS: для Blink и WebKit, а также браузеров Firefox.
В этом мануале вы узнаете, как использовать CSS для настройки полос прокрутки, которые будут поддерживаться современными браузерами.
Требования
Чтобы следовать инструкциям, рекомендуем вам ознакомиться с такими понятиями:
- префиксы поставщиков
- псевдоэлементы
- постепенная деградация
Стилизация полос прокрутки в Chrome, Edge и Safari
В настоящее время для оформления полосы прокрутки в браузерах Chrome, Edge и Safari существует псевдоэлемент -webkit-scrollbar.
В приведенном ниже примере использованы псевдоэлементы ::- webkit-scrollbar, ::- webkit-scrollbar-track и ::webkit-scrollbar-thumb.
body::-webkit-scrollbar < width: 12px; /* ширина всей полосы прокрутки */ >body::-webkit-scrollbar-track < background: orange; /* цвет зоны отслеживания */ >body::-webkit-scrollbar-thumb < background-color: blue; /* цвет бегунка */ border-radius: 20px; /* округлось бегунка */ border: 3px solid orange; /* отступ вокруг бегунка */ >
Полоса прокрутки, созданная с помощью этих правил CSS, будет оранжевого цвета с синим бегунком. Бегунок будет занимать не всю ширину зоны отслеживания – с каждой стороны будет отступ в 3 пикселя.
Этот код работает в последних версиях Chrome, Edge и Safari.
К сожалению, W3C официально отказался от этой спецификации и, скорее всего, со временем она станет нерекомендуемой.
Стилизация полос прокрутки в Firefox
В настоящее время оформление полосы прокрутки для Firefox происходит при помощи CSS Scrollbars.
В этом примере мы используем свойства scrollbar-width и scrollbar-color:
body < scrollbar-width: thin; /* "auto" или "thin" */ scrollbar-color: blue orange; /* цвет бегунка и зоны отслеживания */ >
Созданная с помощью этих правил полоса будет оранжевого цвета с синим бегунком. В этот раз бегунок не имеет отступов, его ширина совпадает с шириной зоны отслеживания.
Эта спецификация имеет некоторые общие черты со спецификацией -webkit-scrollbar. Однако в настоящее время она не поддерживает настройку отступов и округлости бегунка.
Создание перспективных стилей
CSS можно написать так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и CSS Scrollbars.
В следующем примере мы используем scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb.
/* Работает в Firefox */ * < scrollbar-width: thin; scrollbar-color: blue orange; >/* Работает в Chrome, Edge и Safari */ *::-webkit-scrollbar < width: 12px; >*::-webkit-scrollbar-track < background: orange; >*::-webkit-scrollbar-thumb
Браузеры Blink и WebKit будут игнорировать правила, которые они не распознают, они применят правила -webkit-scrollbar. В свою очередь, браузеры Firefox тоже будут игнорировать неизвестные им правила и применять только CSS Scrollbars. Как только браузеры Blink и WebKit полностью откажутся от спецификации -webkit-scrollbar, они начнут поддерживать код CSS Scrollbars, который ранее игнорировали.
Заключение
В этой статье вы узнали об использовании CSS для оформления полос прокрутки и о том, как обеспечить распознавание этих стилей в большинстве современных браузеров.
Также полосу прокрутки можно имитировать, скрыв стандартную полосу и используя JavaScript для определения высоты и положения новой полосы. Однако такой подход имеет некоторые ограничения при воспроизведении таких действий, как прокрутка с инерцией или затухание движения.
Читайте также: Что такое CSS?
Кастомный скроллбар на 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 (без библиотек)
Стилизация скролла через CSS очень просто и быстро, данный метод работает для таких браузеров как Opera, Chrome, FireFox.
Как стилизовать скролл в Edge и IE не понятно, кто знает пишите в комментарии.
Для браузеров Opera и Chrome:
Просто добавьте следующий код в свой CSS файл
::-webkit-scrollbar-track < background-color: #fff; /*Цвет скролла*/ >::-webkit-scrollbar-thumb < border-radius: 5px; /*Закругление ползунка*/ background-color: #ccc; /*Цвет ползунка*/ >::-webkit-scrollbar < width: 6px; /*Толщина скролла*/ >Для FireFox:
Для FireFox нужно сделать тоже самое, только код немного другой:
Стилизация Скролла
Сегодня будем стилизовать скролл с помощью CSS для webkit браузеров (Google Chrome / Safari / Opera / Яндекс.Браузер) и Mozilla Firefox. А так же рассмотрим изменение скролла при помощи плагина mCustomScrollbar.
Стилизация скролла для Mozilla Firefox
Чтобы изменить скролл в Firefox, используйте следующий код.
html, body < scrollbar-color: #458245 #714826; /* «цвет ползунка» «цвет полосы скроллбара» */ scrollbar-width: auto | thin | none; /* толщина */ >Первое значение scrollbar-color изменяет цвет ползунка, второе — цвет скроллбара.
Значения scrollbar-width изменят толщину (ширину — для вертикального скроллбара, высоту — для горизонтального):
- auto — толщина скролла по умолчанию;
- thin — более тонкий вариант скролла;
- none — скрыть скролл.
Пример. Обратите внимание, данный пример предназначен для просмотра в Firefox .
Выберите цвет скроллбара
Выберите цвет ползунка скроллбара
Выберите толщину скролла
Какой-то контент. Текст, изображения или что-то ещё.
Стилизация скролла для webkit браузеров
Чтобы стилизовать скролл для Google Chrome, Яндекс.Браузер, Safari и Opera используйте следующие CSS свойства.
/* полоса прокрутки (скроллбар) */ ::-webkit-scrollbar < width: 24px; /* ширина для вертикального скролла */ height: 8px; /* высота для горизонтального скролла */ background-color: #143861; >/* ползунок скроллбара */ ::-webkit-scrollbar-thumb < background-color: #843465; border-radius: 9em; box-shadow: inset 1px 1px 10px #f3faf7; >::-webkit-scrollbar-thumb:hover < background-color: #253861; >/* Стрелки */ ::-webkit-scrollbar-button:vertical:start:decrement < background: linear-gradient(120deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(240deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(0deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:vertical:end:increment < background: linear-gradient(300deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(60deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(180deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:start:decrement < background: linear-gradient(30deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(150deg, #02141a 40%, rgba(0, 0, 0, 0) 41%), linear-gradient(270deg, #02141a 30%, rgba(0, 0, 0, 0) 31%); background-color: #f6f8f4; >::-webkit-scrollbar-button:horizontal:end:increment
mCustomScrollbar
Теперь рассмотрим, как кроссбраузерно стилизовать скролл при помощи плагина mCustomScrollbar.
Сначала скачайте архив и извлеките к себе в проект файлы:
- jquery.mCustomScrollbar.min.css
- jquery.mCustomScrollbar.concat.min.js
- mCSB_buttons.png
Затем подключите jQuery и файлы плагина.
Или же можете подключить все файлы через CDN jsdelivr:
Инициализация
Инициализация через JavaScript
(function ($) < $(window).on("load", function () < $(".mycustom-scroll").mCustomScrollbar(); >); >)(jQuery);