ŁukaszBącik

#frontendowe spojrzenie na tworzenie stron www

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.

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.

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