CSS Scroll Snapping, czyli ciekawe przewijanie
Często przemierzając internet można spotkać strony internetowe typu „one page”. Na niektórych przechodzenie między sekcjami odbywa się na zasadzie przewijania oraz „doskakiwania” do kolejnej/poprzedniej sekcji. Dawniej robiło się to za pomocą JavaScriptu, jednak dzisiaj możliwości są większe. Dzisiaj pozwala już na to sam CSS, o czym będzie w tym wpisie.
ŁukaszPodziel się artykułem:
Wsparcie przeglądarek – jest dobrze
Obecnie przeglądarki internetowe zapewniają wsparcie dla scroll-snap niemal w pełni. Oczywiście wyjątkiem jest tu IE, które wymaga dodania prefixu -ms- do poprawnego działania.
Jak tego użyć?
Właściwość scroll-snap używa się do określenia, w jaki sposób ma przewijać się dany kontener. Mianowicie należy nadać kontenerowi właściwość scroll-snap-type i określić jego dzieciom wyrównanie właściwością scroll-snap-align.
<div class="container">
<section class="child">1</section>
<section class="child">2</section>
<section class="child">3</section>
<section class="child">4</section>
</div>.container {
scroll-snap-type: x mandatory;
}
.child {
scroll-snap-align: start;
}Po opakowaniu powyższego kodu w nieco upiększeń, np. flexbox prezentuje się to następująco:
dark
Do czego można wykorzystać i jakie niesie ryzyko?
Zastosowań tego rozwiązania jest wiele. Począwszy od sekcyjnej strony typu „one page”, przez slidery pionowe/poziome, aż po rozbudowane siatki przesuwane we wszystkich kierunkach.
Skąd zatem owe ryzyko skoro wygląda to tak efektownie? Otóż „majstrowanie” przy przewijaniu strony jest nieco kontrowersyjne, ponieważ wprowadza nieco zamieszania. Użytkownik w pierwszej chwili nie wie, czy przypadkiem nie przesunął za daleko strony, zanim zorientuje się jak działa dana strona. Inaczej mówiąc, nie dajesz użytkownikowi kontroli nad scroll’em i miejscem na którym chce się zatrzymać. Stosując jednak owe „przyciąganie” w przypadku galerii może okazać się fajnym pomysłem.
Datepicker inaczej
Jeszcze jednym, bardzo ciekawym, przykładem na wykorzystanie właściwości scroll-snap-type jest wybór daty i czasu. Wykorzystał to pewien użytkownik internetu w swoim pokazie możliwości „przyciągania”.
dark
