Styl paska przewijania

Do określania stylu pasków przewijania użyj właściwości scrollbar-width i scrollbar-color.

Bramus

Wprowadzenie

W Chrome w wersji 2 można było dostosowywać styl pasków przewijania za pomocą pseudoelementów ::-webkit-scrollbar-*. Takie podejście działa dobrze w Chrome i Safari, ale nigdy nie zostało ustandaryzowane przez grupę roboczą CSS.

Ustandaryzowano właściwości scrollbar-width i scrollbar-color, które są częścią specyfikacji modułu stylów suwaka CSS na poziomie 1. Te właściwości są obsługiwane od Chrome 121.

Obsługa przeglądarek

• 121
• 121
• 64
• x

Źródło

Paski przewijania 101

Anatomia paska przewijania

Pasek przewijania składa się przynajmniej ze ścieżki audio i kciuka. Tor to obszar, w którym może poruszać się kciuk. Ścieżka reprezentuje całą odległość przewijania. Miniatura reprezentuje bieżącą pozycję w regionie, który można przewijać. Gdy przewijasz, przesuwa się on na ścieżce. Często można go też przeciągać.

Paski przewijania mogą jednak składać się z większej części niż tylko kciuk i ścieżka. Na przykład suwak może mieć jeden lub więcej przycisków do zwiększania lub zmniejszania przesunięcia. Części, z których składa się suwak, są określane przez system operacyjny.

Ilustracja elementów, z których składa się suwak. Ilustracja po lewej stronie przedstawia minimalną suwak z tylko 1 elementem. Ta po prawej też ma przyciski.

Klasyczne i nakładkowe suwaki

Zanim zaczniesz stylizować suwaki, musisz poznać różnicę między 2 ich typami.

Paski przewijania nakładki

Przewijacze nakładkowe to pływające przewijacze renderowane na wierzchu treści. Domyślnie nie są one wyświetlane, tylko podczas przewijania. Aby treść pod spodem była widoczna, często są one półprzezroczyste, ale to zależy od systemu operacyjnego. Podczas interakcji z nimi ich rozmiar może się też zmieniać.

Ilustracja przeglądarki z przesuwnym paskiem przewijania. Suwak nakłada się na zawartość; miniatura jest częściowo przezroczysta.

Klasyczne paski przewijania

Klasyczne suwaki to suwaki umieszczone w specjalnym pasku suwaka. Pasek przewijania to przestrzeń między wewnętrzną krawędzią obramowania a zewnętrzną krawędzią wypełnienia. Te suwaki są zwykle nieprzezroczyste i zajmują trochę miejsca na sąsiednich treściach.

Ilustracja przedstawiająca przeglądarkę z klasycznym paskiem przewijania. Pasek przewijania jest umieszczony obok treści w dedykowanym obszarze. Dostępna szerokość treści jest zmniejszona w porównaniu z dostępną szerokością, gdy używane są nałożone paski przewijania.

Właściwości scrollbar-color i scrollbar-width

Wyświetlam kolory pasków przewijania za pomocą funkcji scrollbar-color

Właściwość scrollbar-color umożliwia zmianę schematu kolorów suwaków. Właściwość akceptuje 2 wartości <color>. Pierwsza wartość <color> określa kolor miniatury, a druga – kolor do użycia w przypadku utworu.

.scroller {
  scrollbar-color: hotpink blue;
}

Jeśli używasz nakładanego paska przewijania, kolor ścieżki domyślnie nie ma żadnego wpływu. Jednak po najechaniu na suwak pojawi się ścieżka.

Prezentacja: Stylizowanie pasków przewijania: scrollbar-color

Aby użyć domyślnego renderowania dostarczonego przez system operacyjny, użyj wartości auto.

Zmiana rozmiaru suwaka za pomocą scrollbar-width

Właściwość scrollbar-width pozwala wybrać węższy pasek przewijania, a nawet całkowicie go ukryć bez wpływu na przewijanie.

Akceptowane wartości to auto, thin i none.

• auto: domyślna szerokość paska przewijania podana przez platformę.
• thin: cienki wariant paska przewijania udostępniany przez platformę lub niestandardowy pasek przewijania cieńszy niż domyślny pasek przewijania platformy.
• none: skutecznie ukrywa pasek przewijania. Element można jednak przewijać.

Jako wartości pola scrollbar-width nie można użyć pola <length>, np. 16px.

.scroller {
  scrollbar-width: thin;
}

Przy korzystaniu z nakładki paska przewijania kciuk jest rysowany tylko podczas aktywnego przewijania obszaru, który można przewijać.

Prezentacja: stylizacja suwaków: scrollbar-width

Obsługa starszych wersji przeglądarek

Aby uwzględnić wersje przeglądarek, które nie obsługują właściwości scrollbar-color i scrollbar-width, możesz 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: dostosowywanie stylów pasków przewijania za pomocą reguły scrollbar-* z wartością zastępczą ::-webkit-scrollbar-*

Pamiętaj, że po ustawieniu width lub height w ::-webkit-scrollbar zawsze wyświetla się suwak nakładki, który staje się klasycznym suwakiem.

Aby zachować iluzję, możesz zmienić kolory tylko podczas najechania kursorem.

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

Demo: stylizacja suwaków za pomocą scrollbar-* z opcją zapasową ::-webkit-scrollbar-*, która stosuje kolory ::-webkit-scrollbar-* tylko po najechaniu kursorem