Jak tworzyć: niestandardowe paski przewijania

Naucz się, jak używać CSS do tworzenia niestandardowych pasków przewijania.

Niestandardowe paski przewijania

Spróbuj sam

Spróbuj sam

Uwaga:Firefox lub wersje wcześniejsze niż Edge 79 nie obsługują niestandardowych pasków przewijania.

Jak tworzyć niestandardowe paski przewijania

Chrome, Edge, Safari i Opera obsługują niestandardowe ::-webkit-scrollbar Pseudoelement, który pozwala nam zmienić wygląd paska przewijania przeglądarki.

W następnym przykładzie tworzy się pasek przewijania o szerokości 10px, który ma szary tor/szary kolor paska i ciemnoszary (#888) suwak:

/* Szerokość */
::-webkit-scrollbar {
  width: 10px;
}
/* Tor */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Suwak */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Suwak przy podświetleniu kursora */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Spróbuj sam

Ten przykład tworzy pasek przewijania z efektem cienia:

Przykład

/* Szerokość */
::-webkit-scrollbar {
  width: 20px;
}
/* Tor */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Suwak */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Spróbuj sam

Wybór paska przewijania

Dla przeglądarek webkit, możesz użyć poniższych pseudoelementów do dostosowania paska przewijania przeglądarki:

::-webkit-scrollbar Pasek przewijania sam w sobie.
::-webkit-scrollbar-button Przyciski na pasku przewijania (strzałki w górę i w dół).
::-webkit-scrollbar-thumb Przewijający się suwak.
::-webkit-scrollbar-track Tor paska przewijania (pasek postępu).
::-webkit-scrollbar-track-piece Część toru (paska postępu) nie zakryta przez suwak.
::-webkit-scrollbar-corner Kąt dolny paska przewijania, gdzie poziomy i pionowy pasek przewijania się spotykają.
::-webkit-resizer Przycisk do przeciągania i dostosowywania rozmiaru, który pojawia się w rogu niektórych elementów.