Кастомизация скроллбара браузеров на движке WebKit

Оглавление

• Варианты кастомизации
• Элементы скроллбара
• Разные состояние скроллбара
• Как использовать
• Простой пример

#

Варианты кастомизации

Если вы хотите кастомизировать внешний вид вашего скроллбара, вы можете применить мощь языка JavaScript. Но для браузеров работающих на движке WebKit, это можно сделать на чистом CSS, применив нужный префикс, например ::-webkit-scrollbar. 

#

Элементы скроллбара

Вы можете управлять отдельными элементами для кастомизации скроллбара:

::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer

• webkit-scrollbar — Все поле скроллбара.
• webkit-scrollbar-button — Кнопки скрола вверх и вниз (зачастую имеет иконки в виде стрелок).
• webkit-scrollbar-track — Трек поля по которому передвигается ползунок скролла.
• webkit-scrollbar-track-piece — Свободное место на треке (которое не занято ползунком).
• webkit-scrollbar-thumb — Сам ползунок.
• webkit-scrollbar-corner — Угол на скроллбаре, на котором как правило пересекаются вертикальный и горизонтальный скроллбар.
• webkit-resizer — Если ваш скроллбар поддерживает изменение размера поля к которому он прикреплен, можете кастомизировать этот элемент.

#

Разные состояние скроллбара

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

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

• horizontal — псевдокласс применяется к любым частям скроллбара, имеющим горизонтальную ориентацию.
• vertical — псевдокласс применяется к любым частям скроллбара, которые имеют вертикальную ориентацию.
• decrement — Псевдокласс декремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека уменьшать положение вида при использовании (например, вверх по вертикальной полосе прокрутки, влево по горизонтальной полосе прокрутки).
• increment — Псевдокласс инкремента применяется к кнопкам и элементами трека скроллбара. Он указывает, будет ли кнопка или элемент трека увеличивать позицию вида при использовании (например, вниз на вертикальной полосе прокрутки, прямо на горизонтальной полосе прокрутки).
• start — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится перед ползунком.
• end — Этот псевдокласс применяется к кнопкам и фрагментам трека. Он сообщает, что объект находится после ползунка.
• double-button — Псевдокласс применяется к кнопкам и трекам. Он используется для определения является ли кнопка частью пары кнопок, которые находятся на одном конце скроллбара. Для элементов трека он указывает, примыкает ли элемент трека к паре кнопок.
• single-button — Псевдокласс применяется к кнопкам и элементам трека. Он используется для определения того, находится ли кнопка в конце скроллбара. Для элементов дорожек указывает, примыкает ли элемент трека к одной кнопке.
• no-button — Применяется к элементам трека, сообщает, что видимая часть трека приближается к краю скроллбара, другими словами, кнопки в конце трека нет.
• corner-present — Применяется ко всем элементам скроллбара и указывает на наличие угла полосы прокрутки.
• window-inactive — Применяется ко всем элементам скроллбара и сообщает, что окно со скроллбаром в данный момент активно. В последних версиях этот псевдокласс хорошо сочетается с ::selection. Мы планируем расширить его работу для любого контента и предложить в качестве нового стандартного псевдокласса.

#

Как использовать

Все эти псевдоэлементы и псевдоклассы нужны для кастомизации скроллбара в браузерах на движке WebKit (например браузер Google Chrome). Давайте соберем из них несколько примеров:

/* Стили для кастомизации скроллбара */
::-webkit-scrollbar {

}

/* Стили для кастомизации свободной части трека */
::-webkit-scrollbar-track-piece {

}

/* Выделение верхней половины (или левой половины) трека */
::-webkit-scrollbar-track-piece:start {

}

/* Выделение ползунка, когда окно браузера не активно */
::-webkit-scrollbar-thumb:window-inactive {

}

/* Выделение нижней или левой кнопки, когда на них наведён курсор мыши */
::-webkit-scrollbar-button:horizontal:decrement:hover {

}

#

Простой пример

Давайте рассмотрим самый просто пример кастомизации скроллбара с помощью префиксов ::-webkit-. 

/* Размеры скроллбара */
::-webkit-scrollbar {
    width: 15px;
}

/* Трек поле скроллбара */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    background: #000;
}

/* Ползунок скроллбара */
::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(198, 21, 21, 1); 
    background: rgba(198, 21, 21, 1);
}

На выходе получим такой результат.

See the Pen Кастомизация скроллбара браузеров на движках WebKit by webinmind.ru (@webinmind) on CodePen.

Напомню, что такой результат работает только в браузерах на движке WebKit. Если вам необходимо добиться кроссбраузерной кастомизации, рекомендую воспользоваться библиотеками.

А еще, возможно вам будет интересно прочитать статью про кастомизацию чекбоксов и радио-кнопок...