Styl paska przewijania

Aby dostosować styl pasków przewijania, użyj właściwości scrollbar-width i scrollbar-color.

Bramus

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.

Obsługa przeglądarek

• 121
• 121
• 64
• x

Źródło

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.

Ilustracja elementów tworzących pasek przewijania. Ilustracja po lewej stronie przedstawia pasek przewijania o minimalnej szerokości i zawiera jedynie ścieżkę i kciuk. W tej po prawej są też przyciski.

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.

Ilustracja przeglądarki z nałożonym paskiem przewijania. Pasek przewijania nakłada się na treść; kciuk jest częściowo przezroczysty.

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.

Ilustracja przeglądarki z klasycznym paskiem przewijania. Pasek przewijania znajduje się obok treści w osobnym obszarze. Dostępna szerokość treści jest zmniejszana w porównaniu z dostępną szerokością, gdy używane są nakładki pasków przewijania.

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.

Prezentacja: styl pasków przewijania: scrollbar-color

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.

Prezentacja: styl pasków przewijania: scrollbar-width

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);
    }
}

Prezentacja: stosowanie stylu pasków przewijania za pomocą elementu scrollbar-* z wartością zastępczą ::-webkit-scrollbar-*

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. */
}

Prezentacja: zastosowanie stylu pasków przewijania za pomocą elementu scrollbar-* z wartością zastępczą ::-webkit-scrollbar-*; zastosowanie tylko kolorów ::-webkit-scrollbar-* po najechaniu kursorem