Кастомізація скроллбар для webkit, saddy - блог про html, css, електроніці, інтернеті і просто

І так, як ви вже помітили (якщо у вас браузер Google Chrome, Opera, Saffari) що у мене на сайті не звичайні смуги прокрутки. Змінено вони виключно в CSS.

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

Для тих хто вміє верстати або трохи розуміє англійську мову, тут немає нічого незрозумілого, а для тих хто не вміє, поясню докладніше.
І так як у мене використовуються не всі можливості цього псевдоелементи, нижче є інформація і для більш досвідчених верстальників.

Розглянемо існуючі псевдоелементи окремо:

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). На Мозіль не працює!
Запитайте що зробити щоб поміняти смугу прокрутки на Мозіль? Потрібно підключати ДжаваСкрипт плагіни яких вже досить велика кількість в безкоштовному доступі в інтернеті.
Удачі вам в ксатомізаціі скроллбар