Полоса прокрутки - CSS-хитрости

Краткая история стилей полос прокрутки:

Раньше это было то, что мог делать только Internet Explorer (старые версии) с такими вещами, как -ms-scrollbar-base-color. Их больше не существует.
Затем браузерные движки на основе WebKit начали работать с такими вещами, как ::-webkit-scrollbar. Это то, что в основном охватывает эта запись Alamanac, поскольку она работает сегодня в ландшафте Safari / Chrome.
Наконец-то были задействованы стандарты, и эти параметры стиля покрываются свойствами без префикса, такими как scrollbar-color и scrollbar-width.

Стилизация полос прокрутки для мира Safari / Chrome отображается за -webkitпрефиксом поставщика.

Эта запись в альманахе представляет собой обзор, для более полного разбора работы с пользовательскими полосами прокрутки, пожалуйста, прочтите эту статью CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarСемейство свойств состоит из семи различных псевдо-элементов , которые вместе содержат полный элемент пользовательского интерфейса прокрутки:

::-webkit-scrollbarобращается к фону самой панели. Обычно он покрывается другими элементами
::-webkit-scrollbar-button обращается к кнопкам направления на полосе прокрутки
::-webkit-scrollbar-track обращается к пустому пространству «под» индикатором выполнения
::-webkit-scrollbar-track-piece это самый верхний слой индикатора выполнения, не покрытый перетаскиваемым элементом прокрутки (большой палец)
::-webkit-scrollbar-thumb адресует перетаскиваемый элемент прокрутки, размер которого изменяется в зависимости от размера прокручиваемого элемента
::-webkit-scrollbar-corner адресует (обычно) нижний угол прокручиваемого элемента, где могут встречаться две полосы прокрутки
::-webkit-resizerобращается к перетаскиваемой ручке изменения размера, которая появляется над scrollbar-cornerнижним углом некоторых элементов

В дополнение к этим псевдоэлементам существует также одиннадцать классов псевдоселекторов, которые не требуются, но предоставляют дизайнерам возможность стилизовать различные состояния и взаимодействия пользовательского интерфейса полосы прокрутки. Полная разбивка этих псевдоселекторов и подробный пример можно найти в этой статье CSS-Tricks.

Посмотрите на эту ручку!

Точки интереса

Если нет подходящего селектора, предшествующего различным псевдоэлементам, стили будут применяться к любой полосе прокрутки, которая может появиться на странице.
Установка -webkit-scrollbarстилей - это хороший способ заставить вашу веб-страницу отображать горизонтальные или вертикальные полосы прокрутки в версиях Mac OS новее, чем Lion, на которых полосы прокрутки обычно по умолчанию скрыты.
Так как это свойство стоит за -webkitпрефиксом поставщика, несколько подключаемых модулей jQuery были написаны для «polyfill» или расширяют эту функциональность для других браузеров. Один из таких плагинов - jScrollPane.

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.