Styl paska przewijania

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

Wprowadzenie

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

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

Obsługa przeglądarek

  • Chrome: 121.
  • Edge: 121.
  • Firefox: 64.
  • Safari: nieobsługiwane.

Źródło

Paski przewijania 101

Składnia 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. Kciuk przedstawia bieżącą pozycję w obszarze, który można przewijać. Podczas przewijania przesuwa się on w obrębie ścieżki. Często można też przeciągać kciukiem.

Paski przewijania mogą jednak składać się z większej części niż tylko kciuk i ścieżka. Na przykład pasek przewijania może zawierać co najmniej 1 przycisk do zwiększania lub zmniejszania przesunięcia przewijania. Elementy, z których składa się pasek przewijania, zależą od używanego systemu operacyjnego.

Ilustracja elementów tworzących pasek przewijania.
Ilustracja elementów tworzących pasek przewijania. Ilustracja po lewej to pasek przewijania obejmujący jedynie ścieżkę i kciuk. Ta po prawej też ma przyciski.

Klasyczne i nakładane paski przewijania

Zanim zajmiemy się stylem pasków przewijania, musisz zrozumieć różnicę między ich 2 rodzajami.

Nakładanie pasków przewijania

Nakładane paski przewijania to pływające paski przewijania renderowane na treści pod spodem. Nie są one wyświetlane domyślnie, ale tylko podczas aktywnego przewijania. Aby zawartość widoczna pod spodem była widoczna, często są one półprzezroczyste, ale to zależy od systemu operacyjnego. Podczas interakcji z nimi rozmiary mogą się różnić.

Grafika przedstawiająca przeglądarkę z nakładką paska przewijania.
Ilustracja przedstawiająca przeglądarkę z nakładką paska przewijania. Pasek przewijania nakłada się na treść. kciuk jest częściowo przezroczysty.

Klasyczne paski przewijania

Klasyczne paski przewijania to paski przewijania umieszczone w rynku przewijania. Rynna paska przewijania to przestrzeń między wewnętrzną krawędzią obramowania a zewnętrzną krawędzią dopełnienia. Takie paski przewijania są zwykle nieprzezroczyste (nie przezroczyste) i zajmują miejsce od sąsiedniej zawartości.

Ilustracja przeglądarki z klasycznym paskiem przewijania.
Ilustracja przedstawiająca przeglądarkę z klasycznym paskiem przewijania. Pasek przewijania znajduje się obok treści w oddzielnym obszarze. dostępna szerokość treści jest zmniejszona w porównaniu do dostępnej szerokości przy korzystaniu z nakładanych pasków przewijania.

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

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

Właściwość scrollbar-color umożliwia zmianę schematu kolorów pasków przewijania. Właściwość akceptuje 2 wartości <color>. Pierwsza wartość <color> określa kolor kciuka, a druga – kolor 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 gdy najedziesz kursorem na pasek przewijania, pojawi się ścieżka.

Prezentacja: stylowe paski przewijania: scrollbar-color

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

Zmieniam rozmiar paska przewijania za pomocą funkcji 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 węższy niż domyślny pasek przewijania platformy.
  • none: skutecznie ukrywa pasek przewijania. Element można jednak przewijać.

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

.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: stylowe paski przewijania: scrollbar-width

Obsługa starszych wersji przeglądarek

Aby dostosować wersję przeglądarki, która nie obsługuje 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 gdy skonfigurujesz width lub height właściwości ::-webkit-scrollbar, zawsze będzie się wyświetlać nakładany pasek przewijania, co w efekcie zamieni się w klasyczny pasek przewijania.

Aby zachować iluzję, możesz zmieniać kolory tylko po najechaniu 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. */
}
Prezentacja: dostosowywanie stylów pasków przewijania za pomocą metody scrollbar-* z wartością zastępczą ::-webkit-scrollbar-*, po najechaniu kursorem zostanie zastosowane tylko kolory (::-webkit-scrollbar-*)