Styl paska przewijania

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

Bramus

Wstęp

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.

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.

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

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.

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.

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

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

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