Користувацькі скролбари в WebKit

Кріс Койер

Оригінал: http://css-tricks.com/custom-scrollbars-in-webkit

Переклад: Влад Мержевич

Колись ви могли налаштувати скролбари в IE (5.5) за допомогою нестандартних властивостей типу scrollbar-base-color, які застосовувалися до елементів із полосами прокрутки (наприклад, body), і робити дивовижні речі. Але тепер IE інший.

Зараз користувацькі скролбари повертаються, але вже належать до WebKit. Це трохи краще, оскільки властивості містять вендорний префікс (наприклад, ::-webkit-scrollbar) і використовують «Shadow DOM». Все це працює вже кілька років.

Необхідне

Різні частини

Ось псевдоелементи, які відповідають за різні частини полоси прокрутки.

CSS

::-webkit-scrollbar              { /* 1 - скролбар */ }
::-webkit-scrollbar-button       { /* 2 - кнопка */ }
::-webkit-scrollbar-track        { /* 3 - трек */ }
::-webkit-scrollbar-track-piece  { /* 4 - видима частина трека */ }
::-webkit-scrollbar-thumb        { /* 5 - ползунок */ }
::-webkit-scrollbar-corner       { /* 6 - кут */ }
::-webkit-resizer                { /* 7 - зміна розміру */ }

Різні стани

Це псевдоелементи, які дозволяють точніше вибирати різні частини полоси прокрутки в різних станах.

CSS

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

Я вкраду цілий розділ з пости Девіда з блогу WebKit, бо він добре пояснює кожну частину.

:horizontal — застосовується до будь-якого скролбару з горизонтальною орієнтацією.

:vertical — застосовується до будь-якого скролбару з вертикальною орієнтацією.

:decrement — застосовується до кнопок і видимої частини трека, показує, що кнопок немає або видима частина трека зменшується під час використання (вгору для вертикального скролбару і ліворуч для горизонтального).

:increment — застосовується до кнопок і видимої частини трека, показує, що кнопок немає або видима частина трека збільшується під час використання (вниз для вертикального скролбару і праворуч для горизонтального).

:start — застосовується до кнопок і видимої частини трека, показує, що об'єкт знаходиться перед ползунком.

:end — застосовується до кнопок і видимої частини трека, показує, що об'єкт знаходиться після ползунка.

:double-button — застосовується до кнопок і видимої частини трека, використовується для визначення того, що кнопка є частиною пари кнопок, які знаходяться разом в кінці скролбару. Для видимої частини трека показує, що вона прилягає до пари кнопок.

:single-button — застосовується до кнопок і видимої частини трека, використовується для визначення того, що кнопка в кінці скролбару єдине. Для видимої частини трека показує, що вона прилягає до цієї єдиної кнопки.

:no-button — застосовується до видимої частини трека, показує, що видима частина трека наближається до краю скролбару, іншими словами, немає кнопки в кінці трека.

:corner-present — застосовується до всіх елементів скролбару і показує, що є кут.

:window-inactive — застосовується до всіх елементів скролбару і показує, що вікно зі скролбаром в даний момент активне. У останніх версіях цей псевдоклас добре поєднується з ::selection. Ми плануємо розширити його роботу для будь-якого контенту і запропонувати як новий стандартний псевдоклас.

Тепер усе разом

Ці псевдоелементи і псевдокласи працюють разом. Ось декілька випадкових прикладів.

::-webkit-scrollbar-track-piece:start {
   /* Виділення верхньої половини (або лівої половини) трека */
}

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

::-webkit-scrollbar-button:horizontal:decrement:hover {
   /* Виділення нижньої або лівої кнопки, коли на них наведений курсор миші */
}

Дуже простий приклад

Щоб створити дійсно простий користувацький скролбар, ми додамо це.

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

Це приведе до такого результату на простому <div> із вертикальним текстом, який переповнюється.

В диких умовах

Особливо цікавий та елегантний скролбар в блозі Тіма Ван Дамма Maxvoltar (сайт Тіма більше не використовує цей дизайн).

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

Дивитися демо

На Forrst використовуються користувацькі скролбари для фрагментів коду, які також досить гарні. Вони візуально менш насичені, через що не дуже поєднуються з підсвіткою коду.

Похожі матеріали

WebKit

Часті запитання