Što je to scroll-behavior?
Svojstvo scroll-behavior u CSS-u omogućuje glatko pomicanje od jednog dijela stranice do drugog, stvarajući vizualno ugodnu tranziciju.
Prije nego što je ovo svojstvo postojalo, preglednici su jednostavno pomicali stranicu od točke A do točke B, bez ikakve animacije, što je moglo biti neugodno, posebno na dužim stranicama.
Ovo svojstvo nije samo estetska nadogradnja – ono pomaže korisnicima da bolje razumiju gdje se nalaze na stranici i kako navigirati kroz sadržaj. Dodaje onu "glatkoću" koja je ključna za bolji doživljaj.
Kako to zapravo radi?
Kako bi se postiglo glatko pomicanje, CSS koristi svojstvo scroll-behavior. Ovo svojstvo određuje način pomicanja sadržaja na stranici kada korisnik klikne na link koji vodi do određenog dijela stranice. Evo kako to funkcionira:
- auto: Ovo je zadano ponašanje u preglednicima. Kada kliknete na link, stranica se odmah pomakne na ciljano mjesto, bez animacije.
- smooth: To je opcija koju želimo! Pomicanje se odvija glatko, s kontroliranim ubrzanjem i usporavanjem.
- initial: Ovdje se svojstvo postavlja na zadanu vrijednost, što je kao da ste odabrali
auto. - inherit: Element nasljeđuje postavke scroll-behavior svojstva od roditeljskog elementa.
Kratke napomene:
Ovo svojstvo nije ograničeno samo na cijelu stranicu – možete ga primijeniti samo na određene dijelove stranice. Također, može se kombinirati s JavaScriptom za još precizniju kontrolu nad ponašanjem pomicanja.
Iako brzinu animacije ne možete postaviti izravno u CSS-u, mnogi preglednici omogućuju različite varijante brzine.
Gdje koristiti scroll-behavior?
Ovo svojstvo je savršeno za stranice koje imaju dugi sadržaj, kao što su:
- Landing stranice
- Dokumentacije i članci
- Single-page aplikacije
- Navigacijski izbornici s anchor linkovima
Primjer u kodu
HTML i CSS:
<html style="scroll-behavior: smooth">
<body>
<div id="odjeljak1">
<a href="#odjeljak2">Idi na odjeljak 2</a>
</div>
<div id="odjeljak2">
<a href="#odjeljak1">Vrati se gore</a>
</div>
</body>
</html>U ovom jednostavnom primjeru možete vidjeti kako se glatko pomicanje postiže s vrlo malo koda. Klikom na link korisnici neće doživjeti nagli "skok", već će se stranica pomaknuti s glatkim prijelazom, što omogućuje bolju orijentaciju na stranici.
Primjer