Оглавление

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

Если вы хотите кастомизировать внешний вид вашего скроллбара, вы можете применить мощь языка 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

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

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

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

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

Все эти псевдоэлементы и псевдоклассы нужны для кастомизации скроллбара в браузерах на движке 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. Если вам необходимо добиться кроссбраузерной кастомизации, рекомендую воспользоваться библиотеками.

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