W tym artykule zagłębimy się w świat pasków przewijania. Wiem, że nie brzmi to zbyt efektownie, ale zaufaj mi, dobrze zaprojektowana strona idzie w parze z dopasowanym paskiem przewijania. Staromodny chromowany pasek przewijania po prostu nie pasuje tak bardzo.
Przyjrzymy się drobiazgowym szczegółom paska przewijania, a następnie przyjrzymy się kilku fajnym przykładom.
Składniki paska przewijania
To jest bardziej odświeżenie, naprawdę. Istnieją kilka postów tutaj na temat CSS-Tricks które wchodzą w szczegóły, jeśli chodzi o niestandardowe style paska przewijania w CSS.
Aby stylizować pasek przewijania, musisz znać anatomię paska przewijania. Spójrz na tę ilustrację:
Dwa główne elementy, o których należy tutaj pamiętać, to:
- Połączenia śledzić jest tłem pod paskiem.
- Połączenia kciuk to część, którą użytkownik klika i przeciąga.
Możemy zmienić właściwości całego paska przewijania za pomocą prefiksu dostawcy::-webkit-scrollbar selektor. Paskowi przewijania możemy nadać stałą szerokość, kolor tła, zaokrąglone rogi… wiele rzeczy! Jeśli dostosowujemy główny pasek przewijania strony, możemy użyć ::-webkit-scrollbar bezpośrednio w elemencie HTML:
html::-webkit-scrollbar {
/* Style away! */
}Jeśli dostosowujemy pole przewijania, które jest wynikiem overflow: scroll, wtedy możemy skorzystać ::-webkit-scrollbar zamiast tego na tym elemencie:
.element::-webkit-scrollbar {
/* Style away! */
}Oto krótki przykład stylizowania paska przewijania elementu HTML w taki sposób, aby był szeroki i miał czerwone tło:
Co jeśli chcemy zmienić tylko kciuk lub ścieżkę paska przewijania? Zgadłeś — mamy specjalne pseudoelementy poprzedzone prefiksem dla tych dwóch elementów: ::-webkit-scrollbar-thumb i ::-webkit-scrollbar-trackodpowiednio. Oto pomysł na to, co jest możliwe, gdy połączymy wszystkie te rzeczy:
Dość sprzątania! Chcę pokazać trzy stopnie niestandardowego stylu paska przewijania, a następnie otworzyć dużą, starą prezentację przykładów zaczerpniętych z całej sieci w poszukiwaniu inspiracji.
Proste i eleganckie paski przewijania
Niestandardowy pasek przewijania może być nadal minimalny. Zebrałem grupę przykładów, które subtelnie zmieniają wygląd, czy to poprzez niewielką zmianę koloru kciuka lub gąsienicy, czy lekką stylizację tła.
Jak widać, nie musimy szaleć, jeśli chodzi o stylizację paska przewijania. Czasami wystarczy subtelna zmiana, aby poprawić ogólne wrażenia użytkownika dzięki paskowi przewijania, który pasuje do ogólnego motywu.
Fajne przyciągające wzrok paski przewijania
Ale przyznajmy: fajnie jest trochę przesadzić i wykazać się kreatywnością. Oto kilka dziwnych i unikalnych pasków przewijania, które w niektórych przypadkach mogą być „za dużo”, ale z pewnością przyciągają wzrok.
Jeszcze jeden…
A może weźmiemy pasek przewijania na przejażdżkę pociągiem dla kciuka i tory dla, no cóż, toru!
