Styl paska przewijania

Używaj właściwości scrollbar-width i scrollbar-color, aby określać styl pasków przewijania.

Bramus

Wprowadzenie

Od wersji 2 Chrome można stylować paski przewijania za pomocą pseudo-elementów ::-webkit-scrollbar-*. To podejście działa dobrze w Chrome i Safari, ale nigdy nie zostało ustandaryzowane przez grupę roboczą CSS.

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

Paski przewijania – podstawy

Anatomia paska przewijania

Pasek przewijania składa się co najmniej z paska i suwaka. Ścieżka to obszar, po którym może poruszać się kciuk. Ścieżka reprezentuje całą odległość przewijania. Suwak reprezentuje bieżącą pozycję w obszarze przewijania. Podczas przewijania przesuwa się on w ramach ścieżki. Suwak często można też przeciągać.

Paski przewijania mogą mieć więcej elementów niż tylko suwak i ścieżka. Na przykład pasek przewijania może mieć co najmniej 1 przycisk do zwiększania lub zmniejszania przesunięcia przewijania. Elementy, z których składa się pasek przewijania, są określane przez system operacyjny.

Klasyczne i nakładkowe paski przewijania

Zanim zaczniesz się zastanawiać, jak stylować paski przewijania, musisz poznać różnicę między 2 rodzajami pasków przewijania.

Nakładane paski przewijania

Paski przewijania nakładki to pływające paski przewijania renderowane na treściach znajdujących się pod nimi. Nie są one domyślnie wyświetlane, ale tylko podczas aktywnego przewijania. Aby treść pod nimi była widoczna, często są półprzezroczyste, ale to zależy od systemu operacyjnego. Podczas interakcji z nimi ich rozmiar może się zmieniać.

Klasyczne paski przewijania

Klasyczne paski przewijania to paski umieszczone w specjalnym rowku paska przewijania. Rynna paska przewijania to przestrzeń między wewnętrzną krawędzią obramowania a zewnętrzną krawędzią dopełnienia. Paski przewijania są zwykle nieprzezroczyste i zajmują część miejsca sąsiadujących treści.

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

Nadawanie paskom przewijania koloru za pomocą scrollbar-color

Właściwość scrollbar-color umożliwia zmianę schematu kolorów pasków przewijania. Właściwość przyjmuje 2 wartości <color>. Pierwsza wartość <color> określa kolor suwaka, a druga – kolor ścieżki.

.scroller {
  scrollbar-color: hotpink blue;
}

Gdy używasz nakładkowego paska przewijania, kolor ścieżki domyślnie nie ma wpływu. Jednak po najechaniu kursorem na pasek przewijania pojawi się ścieżka.

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

Zmiana rozmiaru paska przewijania za pomocą scrollbar-width

Właściwość scrollbar-width pozwala wybrać węższy pasek przewijania lub nawet całkowicie go ukryć 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 niż domyślny pasek przewijania platformy.
• none: Skutecznie ukrywa pasek przewijania. Element nadal można przewijać.

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

.scroller {
  scrollbar-width: thin;
}

Gdy używasz nakładkowego paska przewijania, suwak jest rysowany tylko wtedy, gdy aktywnie przewijasz obszar przewijania.

Obsługa starszych wersji przeglądarek

Aby obsługiwać wersje przeglądarek, które nie obsługują scrollbar-color i scrollbar-width, można używać 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 wartość width lub height dla ::-webkit-scrollbar, zawsze będzie wyświetlany nakładkowy pasek przewijania, co spowoduje, że stanie się on klasycznym paskiem przewijania.

Aby zachować iluzję, możesz zmienić kolory tylko po najechaniu kursorem na pasek przewijania.

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