CSS: scroll-behavior

Scrollanje po strani oz. skoki na strani se običajno izvajajo s pomočjo t.i. sider. Skoki po strani s pomočjo sider pa so brutalni oz. hitri, brez animacije. Animacijo smo običajno dosegli s pomočjo JavaScripta oz. knjižnic. S pomočjo CSSja pa lahko ta efekt dosežemo precej lažje.

Nežno premikanje po strani s pomočjo sider, ali gumbov “Skok na vrh” običajno dosežemo s pomočjo JavaScript-a. Tako moramo za boljšo uporabniško izkušnjo, saj uporabnik v tem primeru vidi kako potuje po strani žrtvovati večji prenos podatkov in posledično počasnejše nalaganje strani. Vsemu temu pa se lahko izognemo s pomočjo CSSja, natančneje značke “scroll-behavior”, ki omogoča ravno to – mehko premikanje po vsebini.

Primer značke scroll-behavior: smooth;

html {
scroll-behavior: smooth;
}

Značka scroll-behavior sicer trenutno še ni popolnoma podrta. Podpirajo jo vse novejše verzije brskalnikov Edge, Firefox, Chrome, Safarti in Opera. Ni pa podprta na IE, Opera mini, Safari za iOS. Ker značka oz. efekt ni kritičen za delovanje in stran deluje tudi brez njega ga lahko brez skrbi že uporabite.

Dodatno branje na temo scroll-behavior: smooth:

Oznake: CSSscroll-behaviorsidra

Komentiraj


*