Aby dostosować styl pasków przewijania, użyj właściwości scrollbar-width
i scrollbar-color
.
Wstęp
W Chrome w wersji 2 można zmieniać styl pasków przewijania za pomocą pseudoelementów ::-webkit-scrollbar-*
. To podejście działa dobrze w Chrome i Safari, ale nigdy nie zostało ustandaryzowane przez grupę roboczą CSS.
Ustandaryzowane właściwości scrollbar-width
i scrollbar-color
, które wchodzą w skład specyfikacji modułu CSS Scrollbars Styleing Style Level 1, zostały ustandaryzowane. Te właściwości są obsługiwane od wersji Chrome 121.
Podstawowe informacje dotyczące pasków przewijania
Struktura paska przewijania
Pasek przewijania składa się co najmniej ze ścieżki i kciuka. Tor to obszar, po którym może się poruszać kciuk. Tor odpowiada całej długości przewijania. Kcisk reprezentuje bieżącą pozycję w obszarze, który można przewijać. Podczas przewijania porusza się ona w obrębie ścieżki. Kcikiem można też często przeciągać kciuki.
Pamiętaj jednak, że paski przewijania mogą składać się nie tylko z wielu części, np. kciuka i ścieżki. Na przykład pasek przewijania może mieć co najmniej 1 przycisk do zwiększania lub zmniejszania przesunięcia przewijania. Elementy, które składają się na pasek przewijania, są określane przez system operacyjny.
Klasyczne i nakładane paski przewijania
Zanim dowiesz się, jak dostosować styl pasków przewijania, musisz poznać różnicę między 2 ich rodzajami.
Nakładanie pasków przewijania
Nakładane paski przewijania to pływające paski przewijania renderowane u góry treści. Nie wyświetlają się domyślnie, ale tylko wtedy, gdy aktywnie je przewijasz. Aby treść widoczna pod spodem była nadal widoczna, są często półprzezroczyste, ale to zależy od systemu operacyjnego. Podczas interakcji z nimi wielkość również może być różna.
Klasyczne paski przewijania
Klasyczne paski przewijania to paski przewijania umieszczone w specjalnym rynience. Rynny paska przewijania to przestrzeń między wewnętrzną a zewnętrzną krawędzią dopełnienia. Takie paski przewijania są zwykle nieprzezroczyste (nie przezroczyste) i zajmują trochę miejsca na sąsiedniej treści.
Właściwości scrollbar-color
i scrollbar-width
Stosuję kolor pasków przewijania: scrollbar-color
Właściwość scrollbar-color
umożliwia zmianę schematu kolorów pasków przewijania. Właściwość może mieć 2 wartości <color>
. Pierwsza wartość <color>
określa kolor kciuka, a druga – kolor używany przy ścieżce.
.scroller {
scrollbar-color: hotpink blue;
}
Gdy używasz nakładki paska przewijania, domyślnie kolor ścieżki nie ma znaczenia. Ścieżka zostanie wyświetlona, gdy najedziesz kursorem na pasek przewijania.
Aby użyć domyślnego renderowania udostępnianego przez system operacyjny, jako jego wartości użyj auto
.
Zmiana rozmiaru paska przewijania za pomocą funkcji scrollbar-width
Właściwość scrollbar-width
umożliwia wybranie węższego paska przewijania lub nawet jego ukrycie bez wpływu na możliwość przewijania.
Akceptowane wartości to auto
, thin
i none
.
auto
: domyślna szerokość paska przewijania podana przez platformę.thin
: cienka wersja paska przewijania udostępniana przez platformę lub niestandardowy pasek przewijania cieńszy od domyślnej wersji paska przewijania platformy.none
: ukrywa pasek przewijania. Element nadal można jednak przewijać.
Nie można użyć elementu <length>
, np. 16px
, jako wartości parametru scrollbar-width
.
.scroller {
scrollbar-width: thin;
}
W przypadku korzystania z nakładki paska przewijania kciuk jest rysowany tylko wtedy, gdy aktywnie przewijasz obszar.
Obsługa starszych wersji przeglądarek
W przypadku wersji przeglądarek, które nie obsługują scrollbar-color
i scrollbar-width
, można użyć zarówno nowych właściwości scrollbar-*
, jak i ::-webkit-scrollbar-*
.
.scroller {
--scrollbar-color-thumb: hotpink;
--scrollbar-color-track: blue;
--scrollbar-width: thin;
--scrollbar-width-legacy: 10px;
}
/* Modern browsers with `scrollbar-*` support */
@supports (scrollbar-width: auto) {
.scroller {
scrollbar-color: var(--scrollbar-color-thumb) var(--scrollbar-color-track);
scrollbar-width: var(--scrollbar-width);
}
}
/* Legacy browsers with `::-webkit-scrollbar-*` support */
@supports selector(::-webkit-scrollbar) {
.scroller::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller::-webkit-scrollbar {
max-width: var(--scrollbar-width-legacy);
max-height: var(--scrollbar-width-legacy);
}
}
Pamiętaj, że gdy ustawisz width
lub height
dla ::-webkit-scrollbar
, zawsze wyświetlany jest nakładkowy pasek przewijania, który zamienia go w klasyczny pasek przewijania.
Aby zachować iluzję, możesz zmienić kolory tylko po najechaniu kursorem myszy.
.scroller::-webkit-scrollbar-thumb {
background: transparent;
}
.scroller::-webkit-scrollbar-track {
background: transparent;
}
.scroller:hover::-webkit-scrollbar-thumb {
background: var(--scrollbar-color-thumb);
}
.scroller:hover::-webkit-scrollbar-track {
background: var(--scrollbar-color-track);
}
.scroller:hover {
--fix: ; /* This custom property invalidates styles on hover, thereby enforcing a style recomputation. This is needed to work around a bug in Safari. */
}