scroll-behaviorNekretnina u CSS nam omogućuje da definira je li svitak mjesto pregledniku skače na novo mjesto ili glatko animira prijelaz kada korisnik klikne na link koji cilja na usidreni položaj unutar pomicanje okvira.
html ( scroll-behavior: smooth; )Dublje objašnjenje
Čekaj, čekaj, o čemu je ovo okretno polje za pomicanje? To je element sa sadržajem koji prelazi svoje granice.
Pogledajte Okvir za pomicanje olovke tvrtke CSS-Tricks (@ css-tricks) na CodePenu.
Primijetite kako okvir u demonstraciji iznad ima fiksnu visinu od 200px? Bilo koji sadržaj koji premašuje tu visinu izvan je okvira okvira, a dodali smo overflow-y: scrollda taj dodatni sadržaj učinimo dostupnim vertikalnim pomicanjem. To je ono što mislimo pod okvirom za pomicanje.
Recimo da na vrh okvira dodamo navigaciju sa svakom vezom koja cilja tri odjeljka sadržaja:
Pogledajte Okvir za pomicanje olovke w / Nav od CSS-Tricks (@ css-tricks) na CodePenu.
Svaka poveznica vodi korisnika izravno na različite odjeljke sadržaja unutar okvira za pomicanje. Prema zadanim postavkama taj prijelaz između naglog je skoka.
Ta vrsta skoka može biti nezgodna. Tu scroll-behaviordolazi i omogućuje nam postavljanje glatkog prijelaza pomicanja. Ovakve su stvari nekada uzimale fensi Javascript, ali scroll-behaviorpružit će nam mogućnost da to učinimo izvorno u CSS-u, nakon što se poboljša podrška za preglednik.
Sintaksa
.module ( scroll-behavior: ( auto | smooth ); )Vrijednosti
scroll-behaviorNekretnine prihvaća dvije vrijednosti, što je u biti preklopni nesmetano pomicanje značajka i isključivati.
auto(zadano): Ova vrijednost omogućuje nagli skok između elemenata unutar okvira za pomicanje.smooth: Točno svom imenu, ova vrijednost predstavlja gladak animirani prijelaz između elemenata unutar okvira za pomicanje.
Demo
Sljedeći demo radit će samo na Chrome 61+, Firefox 36+ i Opera 48+ u vrijeme pisanja ovog članka.
Pogledajte Okvir za pomicanje olovke sa `ponašanjem pomicanja` od CSS-trikova (@ css-trikovi) na CodePenu.
Podrška preglednika
Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.
Radna površina
| Krom | Firefox | IE | Rub | Safari |
|---|---|---|---|---|
| 61 | 36 | Ne | 79 | Ne |
Mobitel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Više informacija
- CSSOM modul prikaza: Nacrt specifikacije, uključujući CSS svojstvo. Trenutni nacrt uključuje preporuku za prelazak
scroll-behaviorna drugu specifikaciju, pa će biti zanimljivo vidjeti gdje to slijeće. - Mozilla Developer Network: MDN referenca za specifikaciju
- Status platforme Microsoft Edge: Trenutno prikazuje status ove značajke kao Razmatra se
- Status platforme Chrome: trenutno prikazuje status ove značajke kao U razvoju i uključuje statuse drugih platformi po strani
- Glatko pomicanje isječka: isječci koji omogućuju glatko pomicanje pomoću Javascripta i jQueryja
- Glatko pomicanje i pristupačnost: CSS-trikovi objavljuju utjecaj glatkog pomicanja s omogućenim Javascriptom