![gmail scrollbar](https://www.simplecoding.org/wp-content/uploads/2012/01/gmail-scroll.png)
Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).
Сразу хочу сказать, что я не сторонник изменения внешнего вида скролла, всё-таки это стандартный элемент управления и большинство пользователей привыкли к его виду. Злоупотребление возможностью его изменения может усложнить работу с сайтом.
Тем не менее, в некоторых случаях создание собственного дизайна для скроллбара полностью оправдано. Возьмем в качестве примера структуру страницы Gmail.
![gmail-window gmail-window](https://www.simplecoding.org/wp-content/uploads/2012/01/gmail-window.png)
Видите, скроллбар находится внутри страницы, т.е. логично, что его внешний вид должен соответствовать дизайну всей страницы. Ведь во многих случаях в web интерфейсах используется нестандартное оформление кнопок, чекбоксов, ползунков и других элементов управления.
Теперь рассмотрим, каким образом можно изменить внешний вид скролла
Движок WebKit поддерживает несколько CSS псевдоклассов, которые определяют оформление различных областей скроллбара. Взгляните на следующий рисунок.
![scroll-default scroll-default](https://www.simplecoding.org/wp-content/uploads/2012/01/scroll-default.png)
Как видите, все псевдоклассы имеют префикс -webkit-
.
Кроме перечисленных на картинке, есть ещё два псевдокласса:
::-webkit-scrollbar-corner
– отвечает за оформление квадрата в месте соприкосновения вертикального и горизонтального скролла;
::-webkit-resizer
– используется для скроллбаров текстовой области, размеры которой можно изменять.
Также, вместе с этими классами можно использовать различные псевдоэлементы.
Обычные :enabled
, :disabled
, :hover
и :active
и специальные:
:horizontal
– применяется для частей скроллбара, которые расположены горизонтально;
:vertical
– применяется для частей скроллбара, которые расположены вертикально;
:decrement
– применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вверх или влево;
:increment
– применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вниз или вправо;
:start
– применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект выше (левее) ползунка;
:end
– применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект ниже (правее) ползунка;
:double-button
– применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка частью двойной кнопки, расположенной на одном из концов полосы прокрутки. Для полосы прокрутки этот псевдокласс показывает граничит ли она с двойной кнопкой;
:single-button
– применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка одинарной. Для полосы прокрутки этот псевдокласс показывает граничит ли она с одинарной кнопкой;
:no-button
– применяется к участкам полосы прокрутки и показывает, касается ли она края скроллбара (например, если нет кнопок на краях скроллбара);
:corner-present
– применяется к участкам полосы прокрутки и показывает, присутствует ли угловая область скроллбара (квадрат на стыке горизонтального и вертикального скроллбаров);
:window-inactive
– применяется ко всем элементам скроллбара и показывает является ли окно к которому относится данный скроллбар активным.
Переходим к нашему примеру
В скроллбаре, который используется в Gmail, нет кнопок вверх-вниз, а ползунок представляет собой обычный прямоугольник серого цвета. При наведении курсора на скроллбар, подсвечивается полоса прокрутки.
![gmail-like-scroll gmail-like-scroll](https://www.simplecoding.org/wp-content/uploads/2012/01/gmail-like-scroll.png)
Займёмся оформлением.
Для начала, зададим общую ширину скроллбара:
::-webkit-scrollbar{ width:12px; }
Теперь займёмся оформлением полосы прокрутки (светлосерый фон, серая граница, делаем границу чуть толще с левой стороны):
::-webkit-scrollbar-thumb{ border-width:1px 1px 1px 2px; border-color: #777; background-color: #aaa; }
При наведении курсора (:hover
) на полосу прокрутки делаем её более тёмной:
::-webkit-scrollbar-thumb:hover{ border-width: 1px 1px 1px 2px; border-color: #555; background-color: #777; }
Ползунок в неактивном состоянии будет выглядеть как сплошной прямоугольник серого цвета (без границы)
::-webkit-scrollbar-track{ border-width:0; }
При наведении курсора на ползунок, делаем его темнее и добавляем границу.
::-webkit-scrollbar-track:hover{ border-left: solid 1px #aaa; background-color: #eee; }
Как видите, используя обычные CSS правила можно изменить скроллбар до неузнаваемости 🙂
Успехов!