Стилизация полосы прокрутки в 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?
Как убрать полосы прокрутки?
Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.
Решение
Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!
Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.
Пример 1. Страница без полос прокрутки
HTML5 CSS2.1 IE Cr Op Sa Fx
Полосы прокрутки html < overflow: hidden; >div Бла-бла В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
HTML5 CSS3 IE Cr Op Sa Fx
Полосы прокрутки Бла-бла Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Как убрать полосы прокрутки?
Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.
Решение
Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!
Способ основан на использовании свойства overflow , которое добавляется к селектору HTML, как показано в примере 1.
Пример 1. Страница без полос прокрутки
HTML5 CSS2.1 IE Cr Op Sa Fx
Полосы прокрутки html < overflow: hidden; >div Бла-бла В данном примере используется значение hidden , которое «обрезает» весь контент выходящий за рамки элемента.
Также можно использовать свойство overflow-x , чтобы скрыть только горизонтальную полосу прокрутки и overflow-y — для сокрытия вертикальной полосы. В примере 2 показано добавление слоя с минимальной шириной 800 пикселов. При уменьшении окна браузера до этой величины, слой перестаёт менять свои размеры и появляется горизонтальная полоса прокрутки. С помощью свойства overflow-x полосы прокрутки скрываются.
Пример 2. Нет горизонтальной полосы прокрутки
HTML5 CSS3 IE Cr Op Sa Fx
Полосы прокрутки Бла-бла Свойства overflow-x и overflow-y входят в спецификацию CSS3 и не проходят валидацию при проверке стилей на CSS2.1.
Как стилизовать или убрать полосу прокрутки — CSS скроллбар
Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.
Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.
Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.
1 Как убрать полосу прокрутки CSS
Скрыть полосу прокрутки можно как у отдельного элемента на странице, так и у всей страницы целиком. Сделать это не сложно, достаточно написать следующее свойство:
CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 2 Как изменить скроллбар CSS
Теперь давайте рассмотрим базовую структуру полосы прокрутки:
-webkit-scrollbar состоит различных псевдо-элементов.
- ::-webkit-scrollbar — это фон самого скроллбара.
- ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
- ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
- ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.
Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.
HTML Document
3 CSS стили
Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.
CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; }
Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .
Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.
CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; }
Ширина полосы в 7 пикселей
Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.
CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; }
Изменение цвета индикатора
Добавим свойство box-shadow полосе, чтобы добавить скроллбару контрастность. Подобрать подходящую тень можно в нашем box-shadow генераторе.
CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; }
Добавление внутренней тени
В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.
Пример 1
Пример 2
Пример 3
Пример 4
Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; }
Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); }
Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); }
В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.
Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); }
Предыдущая запись