Кастомизация скроллбаров для webkit

Привет!
Иногда дизайнеры рисуют кастомные скроллбары что задаёт некоторые трудности при верстке. Я бы конечно не стал называть это трудностями, а скорее неудобством, т.к. это довольно не кроссбрузерно (если не использовать javascript). В данной статье я покажу кастомизацию скроллбаров именно без джаваскрипта.

И так, как вы уже заметили (если у вас браузер Google Chrome, Opera, Saffari) что у меня на сайте не обычные полосы прокрутки. Изменены они исключительно в CSS.

кастомная полоса прокрутки webkit

А вот маленький кусок CSS кода.

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0px;
    border-radius: 0px;
    background: #359BED; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
	background: #359BED; 
}

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

Рассмотрим существующие псевдоелементы по отдельности:

кастомизация скроллбара css webkit

1) ::-webkit-scrollbar – сам скроллбар, для изменения ширины и т.д.
2) ::-webkit-scrollbar-button – кнопки-стрелочки
3) ::-webkit-scrollbar-track – полностью весь трек, включая закрытую ползунком часть
4) ::-webkit-scrollbar-track-piece – только та часть трека которую мы видим
5) ::-webkit-scrollbar-thumb – ползунок скроллбара
6) ::-webkit-scrollbar-corner – уголок на стыке горизонтального и вертикального скроллбаров
7) ::-webkit-resizer – на примере не видно, но есть еще уголок с полосочками, который можно растягивать.

Есть еще перечень псевдоселекторов с помощью которых можно более точно указать на часть скроллбара который вы хотите изменить.

1) :start — информирует о том что объект расположен над ползунком (или перед), и применяется соответственно к части скроллбара которую видно и к кнопкам
2) :end — информирует о том что объект расположен под ползунком (или после), и применяется также к части скроллбара которую видно и к кнопкам
3) :horizontal — этим псевдоселектором можно указать на отдельный или на все горизонтальные скроллбары, но только на горизонтальные вертикальные останутся не редактированными
4) :vertical — то что в предыдущем, только наоборот
5) :double-button — юзается для того, чтобы определить что кнопка двойная (стрелка вверх и вниз), иногда можно увидеть в начале или в конце трека
можно применить к кнопкам и той части трека, которую видно
6) :single-button — то что в предыдущем, только для одинарных кнопок
7) :decrement — указывает что кнопок в треке нету, или то что верхняя часть трека которую мы видим уменьшилась за счет кручения колесика вверх
если рассматривать горизонтальную прокрутку, то уменьшение левой части за счет передвижения ползунка влево
8) :increment — то что в предыдущем, только указывает на увеличение трека за счет кручения колесика вниз для вертикальной полосы прокрутки, и перемещения ползунка вправо на горизонтальной полосе прокрутки
9) :window-inactive — это значит что окно в котором кастомный скроллбар выделено (т.е. активно) применяется к любому элементу полосы прокрутки. Не редко юзают совместно с тегом ::selection
10) :no-button — указывает что в данной полосы прокрутки нету кнопок в начале и в конце
11) :corner-present — данный псевдоселектор указывает что скроллбар имеет уголок, и его можно применить ко всем псевдоелементам полосы прокрутки

На счет кроссбраузерности данных изменений скроллбара я уже говорил в начале статьи, но повторюсь РАБОТАЕТ ТОЛЬКО НА Chrome И НА НОВЫХ ВЕРСИЯХ Opera и Saffari. На старых версиях оперы не работает т.к. она оперовском движке, а новые на движке хрома (webkit). На мозилах не работает!
Спросите что сделать чтобы поменять полосу прокрутки на мозиле? Нужно подключать джаваскрипт плагины которых уже достаточно большое количество в бесплатном доступе в интернете.
Удачи вам в ксатомизации скроллбаров :)

Pin It

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>