Domyślny szary pasek przewijania w przeglądarce działa jak wizytówka z darmowego kreatora stron: spełnia funkcję, ale wrażenie pozostawia na trójkę. Szczególnie widać to, gdy cała strona jest dopracowana co do piksela, fonty dobrane, kolory wycyzelowane, a z prawej strony sterczy niezgrabny pasek z epoki Internet Explorera.

Deweloperzy często omijają ten temat. Nie dlatego, że to trudne, cztery linijki CSS rozwiązują zadanie. Przeszkadzają raczej mity: „działa tylko w Chrome", „użytkownicy nie zauważą", „to fanaberia, a nie funkcja produkcyjna".

W rzeczywistości standard W3C pokrywa podstawy dwiema właściwościami, a pseudoelementy WebKit dają kontrolę nad każdym detalem, od zaokrąglenia po gradient. Zebrałem oba podejścia w jeden tutorial: od specyfikacji po bojowy, wieloprzeglądarkowy kod, którego nie wstyd wdrożyć na produkcji.

💡 Szybki przegląd:

• Konfigurujemy pasek przewijania przez scrollbar-width i scrollbar-color: dwie linijki, pełna kompatybilność między przeglądarkami, zero prefiksów.
• Opanowujemy ::-webkit-scrollbar i jego elementy potomne do precyzyjnej kontroli ścieżki, suwaka i narożników.
• Budujemy rozwiązanie wieloprzeglądarkowe: standard dla Firefoksa, pseudoelementy dla Chrome/Safari/Edge, bez konfliktów.
• Rozbieramy częste błędy: specyficzność, dostępność, zgubione przyciski, pułapki przeglądarek mobilnych.

Po co stylizować pasek przewijania

Pierwszy i główny argument to spójność wizualna. Proszę sobie wyobrazić ciemny landing page z neonowymi akcentami i jaskrawobiałym paskiem przewijania po prawej. Albo jasną, minimalistyczną stronę, gdzie pasek przewijania jest jedynym elementem wybijającym się z palety. Technicznie to nie błąd, ale wygląda jak niedoróbka.

Druga kwestia to branding. Kolorowy pasek przewijania staje się częścią języka wizualnego: zielony suwak w serwisie dostawy zdrowej żywności, pomarańczowy w platformie rezerwacyjnej. Drobny detal, który utrwala skojarzenie bez dodatkowych banerów i wyskakujących okienek.

Trzecia to zarządzanie uwagą. Cienki, półprzezroczysty pasek przewijania nie odciąga uwagi od treści. Na długich landing page'ach wąski pasek wizualnie nie zżera cennych pikseli szerokości, a przy układzie mobilnym z bocznymi marginesami każdy piksel jest na wagę złota.

I kluczowe: to nie jest sztuczka dla geeków. Właściwości scrollbar-width i scrollbar-color wchodzą w skład specyfikacji CSS Scrollbars Styling Module Level 1 i są wspierane przez wszystkie aktualne przeglądarki. Według danych Can I Use na czerwiec 2026 roku pokrycie standardowych właściwości przekracza 95% użytkowników, era prefiksów dostawców dla paska przewijania dobiegła końca.

Podejście standardowe: scrollbar-width i scrollbar-color

Najprostszy i najbardziej niezawodny sposób. Dwie właściwości bez prefiksów, zrozumiała składnia, działanie w Firefox, Chrome, Edge i Safari.

Podstawowa składnia

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

Pierwsza wartość scrollbar-color to kolor suwaka (thumb), druga to kolor ścieżki (track). Właściwość scrollbar-width przyjmuje trzy wartości:

• auto, standardowa szerokość (około 17px w Windows, 15px w macOS z myszą);
• thin, cienki pasek przewijania (około 8px);
• none, całkowite ukrycie paska przewijania (przewijanie działa, ale użytkownik może nie zrozumieć, że treść się przewija, proszę stosować ostrożnie).

Przykład dla ciemnego motywu

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

Rezultat: ciemna ścieżka w kolorze tła i szary suwak. Nic nie wybija się z palety, dwie linijki kodu.

Ograniczenia standardu

Specyfikacja jest celowo minimalistyczna: nie można ustawić zaokrąglenia rogów, cieni, gradientów ani efektów hover. To kompromis między dostosowaniem a zachowaniem użyteczności, zbyt niestandardowy pasek przewijania łamie przyzwyczajony model interakcji. Jeśli standardowy zestaw nie wystarcza, włączamy pseudoelementy WebKit.

Precyzyjne dostosowanie przez::-webkit-scrollbar

Zestaw pseudoelementów ::-webkit-scrollbar-* nie jest częścią standardu W3C, ale jest wspierany przez przeglądarki na silnikach WebKit i Blink: Chrome, Edge, Safari, Opera, Brave, Arc. Pokrycie, według statystyk Can I Use, stanowi przytłaczającą większość użytkowników desktopowych.

Architektura paska przewijania w WebKit

Przeglądarkowy pasek przewijania składa się z siedmiu części, każda ma swój pseudoelement:

W praktyce zdecydowaną większość zadań rozwiązują trzy: scrollbar, track i thumb. Reszta służy do specyficznych rozwiązań projektowych.

Przykład: schludny pasek przewijania dla bloga

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
}

Sześć pikseli szerokości, przezroczysta ścieżka (niewidoczna bez przewijania), zaokrąglony suwak z przyciemnieniem po najechaniu. Pasek przewijania nie krzyczy o sobie, ale wygląda nowocześnie.

Przykład z gradientem dla landing page'a

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
}

Pionowy gradient na suwaku, ciemna ścieżka, cienka ramka dla oddzielenia od tła. Trzy dodatkowe linijki do bazy, odczucie ze strony jest inne.

Ukrywanie paska przewijania bez utraty przewijania

Klasyczny chwyt dla okien modalnych i menu typu burger:

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

Kontener pozostaje przewijalny, ale pasek znika zarówno w Firefox (scrollbar-width: none), jak i w przeglądarkach na WebKit (display: none na samym ::-webkit-scrollbar).

Rozwiązanie wieloprzeglądarkowe

Łączymy standard i pseudoelementy w jeden blok, pokrycie jest praktycznie pełne:

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
}

Kolejność jest ważna: najpierw właściwości standardowe, potem pseudoelementy. Przeglądarki ze wsparciem standardu stosują scrollbar-color i ignorują ::-webkit-scrollbar-*, tak wymaga specyfikacja. Przeglądarki bez wsparcia standardu używają pseudoelementów. Nie powstaje konflikt.

Gdzie wstawić kod

Trzy warianty, od prostego do elastycznego:

• Globalnie w style.css motywu. Pasuje, jeśli styl paska przewijania jest jednakowy dla całej strony. Minus: podczas aktualizacji motywu zmiany przepadną.
• W sekcji „Dodatkowe style" customizera. Ścieżka: Wygląd → Dostosuj → Dodatkowe style. Bezpieczny sposób dla WordPressa: style żyją w ustawieniach motywu i nie znikają podczas aktualizacji.
• Przez wtyczkę typu Code Snippets. Jeśli trzeba celowo ustawić pasek przewijania dla konkretnych stron przez klasy CSS.

W motywie potomnym style podłącza się osobnym plikiem przez wp_enqueue_scripts z hakiem wp_head.

Typowe błędy podczas stylizacji

Zapomniana kompatybilność między przeglądarkami. Ustawiono tylko ::-webkit-scrollbar, w Firefox został domyślny pasek. Zawsze proszę dodawać scrollbar-width i scrollbar-color parę linijek wyżej w kodzie.

Zbyt cienki pasek przewijania. Przy szerokości 2-3px w ::-webkit-scrollbar trafienie myszą w suwak staje się zadaniem na sprawność manualną. Szczególnie krytyczne na laptopach bez zewnętrznej myszy. Minimalna komfortowa szerokość to 6px.

Zerowy kontrast. Szary suwak na szarej ścieżce zlewa się w jedną plamę. Minimalny kontrast kolorystyczny między thumb a track wynoszący 3:1 to wymóg WCAG 2.1 AA dla elementów interfejsu.

Nadpisywanie wszystkich pseudoelementów bez potrzeby. Kod się rozrasta, efekt zerowy. W większości przypadków wystarcza scrollbar, track i thumb. Przyciski (button) i narożnik (corner) proszę ruszać tylko wtedy, gdy projekt naprawdę tego wymaga.

Wyciek stylów na całą stronę. Zapisanie na * lub html bez ograniczeń stylizuje też wewnętrzne paski przewijania: pola tekstowe, bloki kodu, listy rozwijane. Dla podglądu kodu jest to prawie zawsze zbędne. Proszę używać selektorów z klasą: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Często zadawane pytania

Czy stylizacja paska przewijania działa na urządzeniach mobilnych?

Nie, w przeglądarkach mobilnych pasek przewijania nie jest wyświetlany statycznie, pojawia się tylko podczas przewijania i jest zarządzany przez system operacyjny. Stylizacja CSS na iOS i Android nie jest stosowana. Ale to nie problem: na urządzeniach mobilnych pasek przewijania nie jest elementem stałego interfejsu. Sprawdzono na iOS 18 Safari i Android 15 Chrome, niestandardowe style są ignorowane, używany jest systemowy wskaźnik. Na tabletach z zewnętrzną klawiaturą pasek przewijania może być wyświetlany stale i style działają.

Jak stylizować poziomy pasek przewijania oddzielnie od pionowego?

Przez pseudoelementy z prefiksem kierunku: ::-webkit-scrollbar-horizontal i ::-webkit-scrollbar-vertical. W praktyce używa się ich rzadko, wsparcie jest gorsze niż dla głównych pseudoelementów. Pewniej jest przypinać style do konkretnego kontenera z potrzebnym typem przewijania przez selektor klasy. Dla poziomego przewijania wewnątrz bloku kodu: .code-block::-webkit-scrollbar { height: 4px; } ustawia wysokość poziomego paska przewijania, a .code-block::-webkit-scrollbar-thumb { background: #666; } stylizuje suwak. Standardowe scrollbar-width i scrollbar-color działają tak samo dla obu kierunków.

Czy można animować pasek przewijania podczas najechania?

Tak, przez transition na ::-webkit-scrollbar-thumb. Ale wsparcie transition na pseudoelementach jest niepełne: Chrome i Edge działają, Safari może szwankować. Dlatego częściej używa się zmiany koloru przez :hover bez animacji, jest to pewniejsze i wygląda czysto. Działający wariant: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } płynnie zmienia kolor suwaka. Dla width proszę nie stosować transition: zmiana szerokości paska przewijania podczas najechania przesuwa treść i irytuje.

Jak stylizować pasek przewijania wewnątrz konkretnego bloku, a nie całej strony?

Proszę użyć selektora złożonego: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Dla właściwości standardowych: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Działa dla każdego kontenera z overflow-y: auto lub overflow-y: scroll. Proszę nie stosować selektora * dla paska przewijania, obejmie on pola tekstowe i listy rozwijane.

Czy trzeba dublować style dla ::-webkit-scrollbar i właściwości standardowych?

Tak, jeśli potrzebna jest kompatybilność między przeglądarkami. Firefox używa tylko scrollbar-width i scrollbar-color, ignorując pseudoelementy. Chrome i Edge od wersji 121 wspierają oba mechanizmy, ale stosują właściwości standardowe priorytetowo, pseudoelementy działają w nich jako fallback dla starszych wersji. Cztery linijki kodu (dwie na standard, dwie na WebKit) pokrywają wszystkie przeglądarki bez konfliktów.

Czy warto stylizować pasek przewijania w 2026 roku

Zdecydowanie tak, jeśli tworzy Pan publiczną stronę. Dwie linijki standardowego CSS dają schludny pasek przewijania, który nie wybija się z projektu i nie wymaga polyfilli. Dla landing page'y i projektów brandowanych pseudoelementy WebKit dodają indywidualności bez szkody dla wydajności.

Główna zasada: nie przesadzać. Pasek przewijania pozostaje funkcjonalnym elementem interfejsu, a nie płótnem do eksperymentów. Minimalna szerokość 6px, kontrast nie niższy niż 3:1, żadnych animacji szerokości, a użytkownik nawet nie zauważy, że pasek przewijania jest stylizowany. A to właśnie jest oznaką dobrej roboty.

Jeśli strona jest na WordPressie, proszę wrzucić kod w dodatkowe style customizera, zajmie to minutę. Rezultat zostanie z Panem podczas aktualizacji motywu i będzie cieszył oko każdego, kto przescrolluje stronę do końca.