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.

CSS scroll snapping

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.

Źródło: CanIUse.com (stan: 12.05.2021)

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