Generator paska przewijania CSS

Nowoczesne właściwości standardowe (od 2023)

/* Applies to the element that scrolls */
html {
  scrollbar-width: thin;           /* auto | thin | none */
  scrollbar-color: #4f46e5 #e5e7eb; /* thumb track */
}

Wsparcie przeglądarek (2024):

• scrollbar-width: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-color: Chrome 121+, Safari 18.2+, Firefox 64+.
• scrollbar-gutter: stable: Chrome 94+, Safari 14+, Firefox 97+. Rezerwuje miejsce na pasek przewijania nawet wtedy, gdy nie jest potrzebny, co zapobiega przesunięciu układu.

Pseudoelementy webkit (Chrome, Safari, starszy Edge)

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3730a3;
}

Bardziej szczegółowa kontrola. width ustawia szerokość pionowego paska przewijania; height ustawia wysokość poziomego. Dodaj obie właściwości dla kontenerów, które mogą przewijać się w obu kierunkach.

Kaskadowe połączenie obu podejść

Najpierw podaj reguły nowoczesne, a potem webkit jako rozszerzenie dla przeglądarek renderujących oba warianty:

.scroll-area {
  scrollbar-width: thin;
  scrollbar-color: #4f46e5 #e5e7eb;
}
.scroll-area::-webkit-scrollbar       { width: 8px; }
.scroll-area::-webkit-scrollbar-track { background: #e5e7eb; }
.scroll-area::-webkit-scrollbar-thumb {
  background: #4f46e5;
  border-radius: 4px;
  border: 2px solid #e5e7eb;
}

Firefox uwzględnia tylko nowoczesne reguły scrollbar-*. Chrome i Safari uwzględniają reguły webkit (które nadpisują nowoczesne, więc zachowanie jest spójne).

scrollbar-gutter zapobiega przesuwaniu treści

Bez zarezerwowanego marginesu treść zmienia układ, gdy pojawia się pasek przewijania (częste w listach dynamicznych). Rozwiązanie:

html { scrollbar-gutter: stable; }
/* or */
html { scrollbar-gutter: stable both-edges; }

Miejsce na pasek przewijania jest rezerwowane niezależnie od tego, czy treść się przewija. both-edges dodaje odpowiadający margines po przeciwnej stronie, aby treść pozostała wizualnie wyśrodkowana.

Całkowite ukrycie pasków przewijania

.no-scrollbar {
  scrollbar-width: none;           /* Firefox */
}
.no-scrollbar::-webkit-scrollbar { display: none; }  /* Chrome, Safari */

Uwaga: ukrycie paska przewijania sprawia, że użytkownicy nie widzą, iż treść można przewijać. Stosuj to tylko z wyraźnym wskaźnikiem (strzałki, kropki stron) albo gdy przewijanie wynika jasno z kontekstu (poziome karuzele, historie czatu).

Uwagi dotyczące urządzeń mobilnych

W systemach iOS i Android paski przewijania pojawiają się tylko na chwilę podczas przewijania. Twój niestandardowy CSS paska nadal się stosuje, ale użytkownicy mogą nigdy nie zobaczyć go dłużej niż przez sekundę. Projektuj odpowiednio: nie inwestuj zbyt mocno w efekty wizualne, które rzadko są widoczne.

Dostępność

• Kontrast: suwak względem ścieżki powinien osiągać 3:1 dla kontrastu nietekstowego (WCAG 1.4.11).
• Szerokość: cienkie paski przewijania trudno chwycić myszą, zwłaszcza użytkownikom z niepełnosprawnościami ruchowymi. Standardowa szerokość jest bezpieczniejszym ustawieniem domyślnym.
• Nigdy nie usuwaj paska przewijania w obszarach przewijalnych bez zapewnienia innego sposobu przewijania. Użytkownicy polegający na pasku zostaną zablokowani.