Jak to zrobić — niestandardowy pasek przewijania
Dowiedz się, jak utworzyć niestandardowy pasek przewijania za pomocą CSS.
Niestandardowe paski przewijania
Uwaga: niestandardowe paski przewijania nie są obsługiwane w przeglądarce Firefox ani Edge w wcześniejszej wersji 79.
Jak tworzyć niestandardowe paski przewijania
Chrome, Edge, Safari i Opera obsługują niestandardowy ::-webkit-scrollbar
pseudoelement, który pozwala nam modyfikować wygląd paska przewijania przeglądarki.
Poniższy przykład tworzy cienki (o szerokości 10 pikseli) pasek przewijania, który ma szary kolor ścieżki/paska i ciemnoszary uchwyt (#888):
Przykład
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
Ten przykład tworzy pasek przewijania z cieniem pola:
Przykład
/* width */
::-webkit-scrollbar {
width: 20px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px
grey;
border-radius: 10px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: red;
border-radius: 10px;
}
Selektory paska przewijania
W przypadku przeglądarek webkit możesz użyć następujących pseudoelementów, aby dostosować pasek przewijania przeglądarki:
::-webkit-scrollbar
pasek przewijania.::-webkit-scrollbar-button
przyciski na pasku przewijania (strzałki skierowane w górę iw dół).::-webkit-scrollbar-thumb
przeciągany uchwyt przewijania.::-webkit-scrollbar-track
ścieżka (pasek postępu) paska przewijania.::-webkit-scrollbar-track-piece
tor (pasek postępu) NIE jest przykryty uchwytem.::-webkit-scrollbar-corner
dolny róg paska przewijania, gdzie spotykają się zarówno poziome, jak i pionowe paski przewijania.::-webkit-resizer
przeciągany uchwyt zmiany rozmiaru, który pojawia się w dolnym rogu niektórych elementów.