CSS: оформление скроллбара в стиле Gmail

Владимир | | CSS, Web дизайн.

gmail scrollbar

Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).

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

Тем не менее, в некоторых случаях создание собственного дизайна для скроллбара полностью оправдано. Возьмем в качестве примера структуру страницы Gmail.

gmail-window

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

Теперь рассмотрим, каким образом можно изменить внешний вид скролла

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

scroll-default

Как видите, все псевдоклассы имеют префикс -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

Займёмся оформлением.

Для начала, зададим общую ширину скроллбара:

::-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 правила можно изменить скроллбар до неузнаваемости 🙂

Успехов!

  • Аноним

    Спасибо, поставил у себя. Только в хроме с фоном какая-то цветомузыка возникает, пришлось добавить background:inherit;

    • Не замечал. Правда я использовал эти стили не для всей страницы, а для div'ов и iframe'ов.

      • Hishchnik

        background:#??????; используется в ::-webkit-scrollbar для изменения фона скроллбара, с ползунком проблем нет ))))

  • хм, странно, не видел там скроллбара

    • Вариантов два:
      1) у вас мало контактов в чате Gmail;
      2) большой монитор с высоким разрешением 🙂

  • Спасибо! Давно такое искал. Мне всегда стандартные не нравились. Добавлю ваш блог в закладки!

  • Pingback: เกมส์ เพชรพลอย()

  • Pingback: create a website()

  • Pingback: bestellen]()

  • Vlad-planet

    в firefox не работает!!!

  • Даже не знал, что так можно, попробую у себя поставить 🙂

  • kirillusgadus

    отлично, то что нужно) а можно ли как то сделать отступ самого скроллбара от края?

    • Отодвинуть сам скроллбар не получится. Но, визуально можно создать отступ с помощью границы.
      ::-webkit-scrollbar{
      border-right: solid 5px #f00;
      }

  • Дмитрий

    Спасибо большое, а я парился через jq создавал))

  • u.Style

    Мне надо чтобы была кнопка вверх вверху, а вниз внизу, и по бокам также. Можно ли это осуществить? Или работает только :horizontal/:vertical с одной картинкой на оба конца?

    • Я не совсем понимаю, можете показать пример скроллбара с кнопками по бокам?

  • LuxCore

    А для других браузеров есть css решение? Или JScrollPane как выход?

    • Для FireFox, по-моему, CSS решения нет.

      Для IE посмотрите эту статью

      • LuxCore

        Спасибо. Но что-то я под IE не настроен кодить. За хромовский вариант большое спасибо.

  • ierecumi

    отличная работа! мне правда не понятно, как к контейнеру этот скрол прилрутить?
    он сам как контейнер описывается!
    подскажите пожалуйста 🙂

    • ierecumi

      и в продолжении темы. -webkit-scrollbar-thumb можно ли задать ему определённую высоту, то есть размер ползунка получается фиксированный, а не растянутый программно, относительно длины track?

    • Применить эти стили для нужного блока.

      Например,

      .tab-content-area::-webkit-scrollbar-track {

      }

      Скролл появится если высота блока меньше высоты контента, который в нем находится. Обычно для этого нужно использовать правило.

      overflow-y: scroll;

      и ограничить высоту блока.

  • Sasa

    Spasibo no on tolko v Chrome rabotaet a drugih bro sho delat ??

    • Эквивалента этих CSS правил для других браузеров нет. Поэтому единственный вариант — использовать JavaScript. Примеры.

  • Dmitriy

    Супер! Думал в начале комменты врут, попробовал и офигел! Реально круто! Спасибо вам большое)

  • Спасибо за статью, но как применить этот же стиль к FF и IE? Спасибо за ответ.

  • Антон

    Очень полезная информация. Спасибо Автору огромное!!!!!!!!!!!!!!!!!

  • Карина

    У меня ничего не работает ((