scroll-behaviorVara CSS võimaldab meil määratleda, kas kerides asukoha brauseri hüppab uude asukohta või sujuvalt elustab üleminekut, kui kasutaja klõpsab lingil, et eesmärkide ankurdatud seisukohta kerimine kasti.
html ( scroll-behavior: smooth; )Sügavam selgitus
Oota, oota, mis see kerimiskast me räägime? See on sisuga element, mis ületab selle piire.
Vaadake CodeSeni CSS-Tricksi (@ css-tricks) pliiatsi kerimise kasti.
Pange tähele, kuidas ülaltoodud demo kasti fikseeritud kõrgus on 200px? Kogu sisu, mis ületab selle kõrguse, asub väljaspool kasti piire ja oleme selle lisanud, overflow-y: scrollet muuta see täiendav sisu vertikaalse kerimisega kättesaadavaks. Seda mõtleme kerimiskasti all.
Oletame, et lisame kasti ülaossa navigeerimise, kus iga link suunab sisu kolme jaotist:
Vaadake CodePeni lehel CSS-Tricksi (@ css-tricks) pliiatsi kerimiskasti koos naviga.
Iga link viib kasutaja otse kerimiskasti sees olevatesse erinevatesse sisulõikudesse. Vaikimisi on see üleminek järsu hüppega.
Selline hüpe võib kiskuda. Seal see scroll-behaviortuleb ja võimaldab meil sujuva kerimise ülemineku seada. Selline asi kasutas varem väljamõeldud Javascripti, kuid scroll-behaviorannab meile võimaluse CSS-is seda teha, kui brauseri tugi paraneb.
Süntaks
.module ( scroll-behavior: ( auto | smooth ); )Väärtused
scroll-behaviorVara nõustub kahe väärtuse, mis sisuliselt lülita Sujuvkerimise funktsioon sisse ja välja.
auto(vaikeväärtus): see väärtus võimaldab kerimis kastis elementide vahel järsult hüpata.smooth: Nime järgi on see väärtus sujuv animeeritud üleminek kerimiskasti elementide vahel.
Demo
Järgmine demo töötab selle kirjutamise ajal ainult Chrome 61+, Firefox 36+ ja Opera 48+ versioonides.
Vaadake CodeSenil CSS-Tricksi (@ css-tricks) pliiatsi kerimiskasti w / "kerimiskäitumisega".
Brauseri tugi
Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.
Töölaud
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 61 | 36 | Ei | 79 | Ei |
Mobiil / tahvelarvuti
| Android Chrome | Android Firefox | Android | iOS-i Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ei |
Rohkem informatsiooni
- CSSOM-i vaatemoodul: spetsifikatsiooni mustand, sealhulgas CSS-i atribuut. Praegune eelnõu sisaldab soovitust
scroll-behaviorteisele spetsifikatsioonile teisaldada , seega on huvitav näha, kuhu see maandub. - Mozilla arendajavõrk: MDN viide spetsifikatsioonile
- Microsoft Edge platvormi olek: praegu kuvatakse selle funktsiooni olek kaalumisel
- Chrome'i platvormi olek: praegu kuvatakse selle funktsiooni olek arendamisel ja see sisaldab teiste platvormide olekuid kõrvale
- Sujuva kerimise koodilõik: koodilõigud sujuva kerimise võimaldamiseks Javascripti ja jQuery abil
- Sujuv kerimine ja juurdepääsetavus: CSS-trikid postitavad Javascripti toega sujuva kerimise mõjudele