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.

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.

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ć.

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.

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.

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ć.

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

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