Jak osiągnąć Smooth-Scroll za pomocą CSS

7 października 2020
Smooth Scroll blog thumbnail

O czym tutaj będzie mowa? O animacji skrolowania, po naciśnięciu linku, który nas przeniesie do innego elementu na danej stronie. Jeśli to zostawimy to zobaczymy nagły przeskok, który w dzisiejszych czasach jest nie na miejscu.

Najczęściej spotykanym rozwiązaniem jest użycie JS & JQuery

Takie rozwiązanie na pewno działa i jest łatwe w użyciu, ponieważ nie musimy się o nic martwić i możemy po prostu wkleić taki snippet do naszej strony i wszystko powinno działać. Użycie JQuery daje nam też pełną wolność bawienia się zmiennymi – szybkością, offsetem a nawet rodzajem animacji (timing-function); wymaga jednak to od nas użycia w naszym projekcie JQuery, przez które obciążamy użytkownika ściąganiem większej ilości plików. (Oczywiście są również rozwiązania posiadające tylko czysty Javascript, punkt jednak pozostaje)

Jeśli tworzymy stronę na której nie jest wymagany javascript, chcemy uprościć sobie życie lub rozwiązanie js-owe u nas nie zadziała, zawsze możemy oddać całą robotę przeglądarce,a to robimy z użyciem jednej css-owej linii:

Takie rozwiązanie niesie ze sobą duże ułatwienie dla programisty wystarczy że zapamięta tą jedną linie a całą resztę zrobi za niego przeglądarka. Nie pozbywamy się jednak możliwości połączenia css-a i js-a. Tutaj mamy podany przykład ze strony – css-tricks

smooth scroll post code screenshot

Oddając przeglądarce całą władzę sami się jej jak na razie pozbywamy – nie mamy wpływu na prędkość scrollowania ani na rodzaj animacji (timing-function). Nadal możemy jednak zmieniać offset z jakim będziemy oddaleni od miejsca docelowego: 

Ostatnim dużym argumentem przeciw użyciu scroll-behavior jest jak na razie wsprarcie przeglądarek, które w trakcie pisania tego znajduje się na poziomie około 78%. Dlatego musimy wiedzieć na jakich przeglądarkach znajdują się nasi użytkownicy. Takie wybiórcze wsparcie może dla niektórych oznaczać że nie zdecydują się na to rozwiązanie, lecz dla tych którzy to zrobią oznacza to tyle że na nie wspieranych przeglądarkach użytkownik będzie widział w pełni działającą stronę lecz bez naszych pięknych animacji.