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

Розробники часто оминають цю тему. Не тому, що складно, чотири рядки CSS вирішують завдання. Радше заважають міфи: «працює тільки в Chrome», «користувачі не помітять», «це пустощі, а не продакшен-фіча».

Насправді стандарт W3C закриває базу двома властивостями, а псевдоелементи WebKit дають контроль над кожною деталлю, від заокруглення до градієнта. Зібрав обидва підходи в один туторіал: від специфікації до бойового кросбраузерного коду, який не соромно вставити в продакшен.

💡 Швидкий огляд:

• Налаштовуємо скролбар через scrollbar-width і scrollbar-color: два рядки, повна кросбраузерність, жодних префіксів.
• Освоюємо ::-webkit-scrollbar та його нащадків для тонкого контролю треку, повзунка та кутів.
• Збираємо кросбраузерне рішення: стандарт для Firefox, псевдоелементи для Chrome/Safari/Edge, без конфліктів.
• Розбираємо часті помилки: specificity, accessibility, загублені кнопки, підводні камені мобільних браузерів.

Навіщо стилізувати скролбар

Перший і головний аргумент, візуальна цілісність. Уявіть темний лендинг із неоновими акцентами та яскраво-білою смугою прокрутки справа. Або світлий мінімалістичний сайт, де скролбар, єдиний елемент, що вибивається з палітри. Технічно не баг, але виглядає як недоробка.

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

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

І ключове: це не трюк для гіків. Властивості scrollbar-width і scrollbar-color входять до специфікації CSS Scrollbars Styling Module Level 1 і підтримуються всіма актуальними браузерами. За даними Can I Use на червень 2026 року, охоплення стандартних властивостей перевищує 95% користувачів, епоха вендорних префіксів для скролбара скінчилася.

Стандартний підхід: scrollbar-width і scrollbar-color

Найпростіший і найнадійніший спосіб. Дві властивості без префіксів, зрозумілий синтаксис, робота у Firefox, Chrome, Edge та Safari.

Базовий синтаксис

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

Перше значення scrollbar-color, колір повзунка (thumb), друге, колір доріжки (track). Властивість scrollbar-width приймає три значення:

• auto, стандартна ширина (близько 17px у Windows, 15px у macOS з мишею);
• thin, тонкий скролбар (близько 8px);
• none, приховати скролбар повністю (прокрутка працює, але користувач може не зрозуміти, що контент скролиться, застосовуйте обережно).

Приклад для темної теми

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Результат: темна доріжка під колір фону та сірий повзунок. Ніщо не вибивається з палітри, два рядки коду.

Обмеження стандарту

Специфікація навмисно мінімалістична: не можна задати заокруглення кутів, тіні, градієнти або hover-ефекти. Це компроміс між кастомізацією та збереженням юзабіліті, надто нестандартний скролбар ламає звичну модель взаємодії. Якщо стандартного набору недостатньо, підключаємо псевдоелементи WebKit.

Тонке налаштування через::-webkit-scrollbar

Набір псевдоелементів ::-webkit-scrollbar-* не входить до стандарту W3C, але підтримується браузерами на WebKit і Blink: Chrome, Edge, Safari, Opera, Brave, Arc. Охоплення, за статистикою Can I Use, становить переважну більшість десктопних користувачів.

Архітектура скролбара в WebKit

Браузерний скролбар складається з семи частин, для кожної, свій псевдоелемент:

На практиці переважну більшість завдань вирішують три: scrollbar, track і thumb. Решта, для специфічних дизайнерських рішень.

Приклад: акуратний скролбар для блогу

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Шість пікселів ширини, прозора доріжка (не видна без скролу), заокруглений повзунок із затемненням під час наведення. Скролбар не кричить про себе, але виглядає сучасно.

Приклад із градієнтом для лендингу

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

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

Приховування скролбара без втрати прокрутки

Класичний прийом для модальних вікон і бургер-меню:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

Контейнер залишається прокручуваним, але смуга зникає і у Firefox (scrollbar-width: none), і в браузерах на WebKit (display: none на самому ::-webkit-scrollbar).

Кросбраузерне рішення

Об’єднуємо стандарт і псевдоелементи в один блок, покриття практично повне:

1
/* Стандарт W3C — Firefox, современные Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* Псевдоэлементы WebKit — детальная стилизация Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

Порядок важливий: спочатку стандартні властивості, потім псевдоелементи. Браузери з підтримкою стандарту застосовують scrollbar-color та ігнорують ::-webkit-scrollbar-*, так вимагає специфікація. Браузери без підтримки стандарту використовують псевдоелементи. Конфлікту не виникає.

Куди вставляти код

Три варіанти, від простого до гнучкого:

• Глобально в style.css теми. Підходить, якщо стиль скролбара однаковий для всього сайту. Мінус: під час оновлення теми правки загубляться.
• У секцію «Додаткові стилі» кастомайзера. Шлях: Зовнішній вигляд → Налаштувати → Додаткові стилі. Безпечний спосіб для WordPress: стилі живуть у налаштуваннях теми і не злітають під час оновлення.
• Через плагін на кшталт Code Snippets. Якщо потрібно прицільно задати скролбар для конкретних сторінок через CSS-класи.

У дочірній темі стилі підключаються окремим файлом через wp_enqueue_scripts із хуком wp_head.

Типові помилки під час стилізації

Забута кросбраузерність. Поставили тільки ::-webkit-scrollbar, у Firefox залишилася дефолтна смуга. Завжди додавайте scrollbar-width і scrollbar-color парою вище за кодом.

Занадто тонкий скролбар. За ширини 2-3px у ::-webkit-scrollbar влучити по повзунку мишею стає завданням на моторику. Особливо критично на ноутбуках без зовнішньої миші. Мінімальна комфортна ширина, 6px.

Нульова контрастність. Сірий повзунок на сірій доріжці зливається в одну пляму. Мінімальний колірний контраст між thumb і track, 3:1, вимога WCAG 2.1 AA для елементів інтерфейсу.

Перевизначення всіх псевдоелементів без потреби. Код роздувається, ефекту нуль. У більшості випадків вистачає scrollbar, track і thumb. Кнопки (button) і кут (corner) чіпайте, тільки якщо дизайн цього реально вимагає.

Витік стилів на все тіло. Задання на * або html без обмежень стилізує і внутрішні скролбари: текстові поля, кодові блоки, випадні списки. Для прев’ю коду це майже завжди зайве. Використовуйте селектори за класом: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Часті запитання

Чи працює стилізація скролбара на мобільних пристроях?

Ні, у мобільних браузерах скролбар не відображається статично, він з’являється тільки під час прокрутки та керується операційною системою. CSS-стилізація на iOS і Android не застосовується. Але це не проблема: на мобільних скролбар не є елементом постійного інтерфейсу. Перевірено на iOS 18 Safari та Android 15 Chrome, кастомні стилі ігноруються, використовується системний індикатор. На планшетах із зовнішньою клавіатурою скролбар може відображатися постійно, і стилі працюють.

Як стилізувати горизонтальний скролбар окремо від вертикального?

Через псевдоелементи з префіксом напрямку: ::-webkit-scrollbar-horizontal і ::-webkit-scrollbar-vertical. На практиці використовуються рідко, підтримка гірша, ніж в основних псевдоелементів. Надійніше вішати стилі на конкретний контейнер із потрібним типом прокрутки через селектор класу. Для горизонтальної прокрутки всередині блоку коду: .code-block::-webkit-scrollbar { height: 4px; } задає висоту горизонтального скролбара, а .code-block::-webkit-scrollbar-thumb { background: #666; } стилізує повзунок. Стандартні scrollbar-width і scrollbar-color працюють однаково для обох напрямків.

Чи можна анімувати скролбар під час наведення?

Так, через transition на ::-webkit-scrollbar-thumb. Але підтримка transition на псевдоелементах неповна: Chrome і Edge працюють, Safari може глючити. Тому частіше використовують зміну кольору через :hover без анімації, надійніше і виглядає чисто. Робочий варіант: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } плавно змінює колір повзунка. Для width transition не застосовуйте: зміна ширини скролбара під час наведення зсуває контент і дратує.

Як стилізувати скролбар усередині конкретного блоку, а не всієї сторінки?

Використовуйте складений селектор: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Для стандартних властивостей: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Працює для будь-якого контейнера з overflow-y: auto або overflow-y: scroll. Селектор * для скролбара не застосовуйте, зачепите текстові поля та випадні списки.

Чи обов’язково дублювати стилі для ::-webkit-scrollbar і стандартних властивостей?

Так, якщо потрібна кросбраузерність. Firefox використовує тільки scrollbar-width і scrollbar-color, ігноруючи псевдоелементи. Chrome і Edge з версії 121 підтримують обидва механізми, але застосовують стандартні властивості пріоритетно, псевдоелементи в них спрацьовують як фолбек для старих версій. Чотири рядки коду (два на стандарт, два на WebKit) закривають усі браузери без конфліктів.

Чи варто стилізувати скролбар у 2026 році

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

Головне правило, не перестаратися. Скролбар залишається функціональним елементом інтерфейсу, а не полотном для експериментів. Мінімальна ширина 6px, контраст не нижче 3:1, жодних анімацій ширини, і користувач навіть не помітить, що скролбар стилізовано. А саме це і є ознакою хорошої роботи.

Якщо сайт на WordPress, закиньте код у додаткові стилі кастомайзера, займе хвилину. Результат залишиться з вами під час оновлення теми і радуватиме око кожному, хто доскролить сторінку до кінця.