CSS: Scroll Snap

CSS Scroll Snap nam omogoča sidranje pogleda oz. določenih elementov na zaslonu. V praksi to pomeni, če uporabnik “scrola” po strani in se vstavi na določenem delu, kjer se vidijo dve vsebine se slednja prestavi ustrezno tako, da je vidna samo ena. Za lažjo predstavo si oglejmo spodnji primer.

Uporaba Scroll Snapa je zelo preprosta na starša dodamo značko “scroll-snap-type”, na elemente v staršu pa “scroll-snap-align”. Ob premikanju v staršu skozi posamezne elemente se slednji premikajo, kot to določimo.

Včasih smo morali za takšne rešitve uporabljati JavaScript, z boljšo podporo pa lahko sedaj uporabimo CSS Scroll Snap. Scroll Snap je podprt v skoraj vseh večjih brskalnikih z izjemo Opere, Internet Explorer pa ima delno podporo. Pred implementacijo vedno preverite podporo na Caniuse.com.

Priporočeno branje za CSS Scroll Snap

Komentiraj


*