Pasek przewijania - CSS-Tricks

Krótka historia stylizacji pasków przewijania:

Kiedyś było to coś, co tylko Internet Explorer mógł zrobić (starożytne wersje) z takimi rzeczami -ms-scrollbar-base-color. Te już nie istnieją.
Potem silniki przeglądarek oparte na WebKit dostały się na pokład z takimi rzeczami, jak ::-webkit-scrollbar. Właśnie to obejmuje głównie ten wpis Alamanac, ponieważ działa obecnie w krajobrazie Safari / Chrome.
W końcu pojawiły się standardy, a te opcje stylizacji są objęte nieprefiksowanymi właściwościami, takimi jak scrollbar-color i scrollbar-width.

Stylizowanie pasków przewijania dla świata Safari / Chrome jest widoczne za -webkitprefiksem dostawcy.

Ten wpis almanachu jest przeglądem, aby uzyskać pełniejszy opis pracy z niestandardowymi paskami przewijania, przeczytaj ten artykuł CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarRodzina właściwości składa się z siedmiu różnych pseudo-elementów, które razem zawierają pełną elementu przewijania UI:

::-webkit-scrollbarodnosi się do tła samego paska. Zwykle jest zasłonięty przez inne elementy
::-webkit-scrollbar-button dotyczy przycisków kierunkowych na pasku przewijania
::-webkit-scrollbar-track odnosi się do pustej przestrzeni „poniżej” paska postępu
::-webkit-scrollbar-track-piece to najwyższa warstwa paska postępu, która nie jest zakryta przez przeciągany element przewijania (kciuk)
::-webkit-scrollbar-thumb adresuje przeciągany element przewijany, który zmienia rozmiar w zależności od rozmiaru przewijalnego elementu
::-webkit-scrollbar-corner dotyczy (zwykle) dolnego rogu przewijalnego elementu, w którym mogą się spotkać dwa paski przewijania
::-webkit-resizerdotyczy przeciąganego uchwytu zmiany rozmiaru, który pojawia się nad scrollbar-cornerdolnym rogiem niektórych elementów

Oprócz tych pseudoelementów istnieje również jedenaście klas pseudo-selektorów, które nie są wymagane, ale zapewniają projektantom możliwość stylizacji różnych stanów i interakcji interfejsu paska przewijania. Pełne zestawienie tych pseudo-selektorów i szczegółowy przykład można znaleźć w tym artykule o Sztukach CSS.

Sprawdź ten długopis!

Użyteczne miejsca

Jeśli przed różnymi pseudoelementami nie ma selektora kwalifikującego, style będą stosowane do każdego paska przewijania, który może pojawić się na stronie.
Ustawienie -webkit-scrollbarstylów to dobry sposób na wymuszenie na stronie internetowej wyświetlania poziomych lub pionowych pasków przewijania w wersjach systemu Mac OS nowszych niż Lion, w których paski przewijania są zwykle domyślnie ukryte.
Ponieważ ta właściwość znajduje się za -webkitprefiksem dostawcy, kilka wtyczek jQuery zostało napisanych jako „polyfill” lub rozszerzające tę funkcjonalność na inne przeglądarki. Jedną z takich wtyczek jest jScrollPane.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.