scroll-behaviorĪpašums CSS ļauj noteikt, vai ritināšanas atrašanās pārlūku lec uz jaunu atrašanās vietu, vai gludi atdzīvina pāreju, kad lietotājs noklikšķina uz saites, kas mērķēta uz nostiprināti nostāja ritināšanu kastē.
html ( scroll-behavior: smooth; )Dziļāks skaidrojums
Pagaidiet, pagaidiet, kas ir šī ritināšanas lodziņš, par kuru mēs runājam? Tas ir elements ar saturu, kas pārpilda tā robežas.
Skatiet CSS-Tricks (@ css-tricks) pildspalvas ritināšanas lodziņu vietnē CodePen.
Ievērojiet, kā iepriekš redzamajā demonstrācijas lodziņā ir noteikts augstums 200px? Jebkurš saturs, kas pārsniedz šo augstumu, atrodas ārpus lodziņa robežas, un mēs esam to pievienojuši overflow-y: scroll, lai šis papildu saturs būtu pieejams ar vertikālu ritināšanu. To mēs domājam ar ritināšanas lodziņu.
Pieņemsim, ka lodziņa augšpusē pievienojam navigāciju, katrai saitei atlasot trīs satura sadaļas:
Skatiet CSS-Tricks pildspalvas ritināšanas lodziņu ar navigāciju (@ css-tricks) vietnē CodePen.
Katra saite novirza lietotāju tieši uz dažādām satura sadaļām ritināšanas lodziņa iekšpusē. Pēc noklusējuma šī pāreja starp ir pēkšņs lēciens.
Šāds lēciens var sagraut. Tur scroll-behaviorienāk un ļauj mums iestatīt vienmērīgu ritināšanas pāreju. Šāda veida lietošanai bija nepieciešams iedomāts Javascript, taču scroll-behaviortas dos mums iespēju to darīt dabiski CSS, tiklīdz uzlabosies pārlūka atbalsts.
Sintakse
.module ( scroll-behavior: ( auto | smooth ); )Vērtības
scroll-behaviorĪpašums pieņem divas vērtības, kas būtībā pārslēgšanas vienmērīgu ritināšanu funkciju ieslēgšana un izslēgšana.
auto(noklusējums): šī vērtība ļauj strauji pāriet starp ritināšanas lodziņa elementiem.smooth: Atbilstoši nosaukumam šī vērtība ir vienmērīga animēta pāreja starp ritināšanas lodziņa elementiem.
Demonstrācija
Šīs rakstīšanas laikā šī demonstrācija darbosies tikai pārlūkos Chrome 61+, Firefox 36+ un Opera 48+.
Skatiet CSS-Tricks (@ css-tricks) pildspalvas ritināšanas lodziņu ar “ritināšanas uzvedību” vietnē CodePen.
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 61 | 36 | Nē | 79 | Nē |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nē |
Vairāk informācijas
- CSSOM skata modulis: specifikācijas projekts, ieskaitot CSS rekvizītu. Pašreizējā projektā ir iekļauts ieteikums pāriet
scroll-behavioruz citu specifikāciju, tāpēc būs interesanti uzzināt, kur tas nonāk. - Mozilla izstrādātāju tīkls: MDN atsauce uz specifikāciju
- Microsoft Edge platformas statuss: Pašlaik šīs funkcijas statuss tiek rādīts kā Apsverams
- Chrome platformas statuss: Pašlaik šīs funkcijas statuss tiek rādīts kā izstrādes stadijā, kā arī citu platformu statusi ir malā
- Vienmērīgs ritināšanas fragments: fragmenti, lai iespējotu vienmērīgu ritināšanu ar Javascript un jQuery
- Vienmērīga ritināšana un pieejamība: CSS-Tricks ziņojums par Javascript iespējotas vienmērīgas ritināšanas ietekmi