scroll-behaviorOmaisuus CSS voimme määrittää, selaa sijainnin selaimen hyppää uuteen sijaintiin tai tasaisesti elävöittää siirtymistä, kun käyttäjä napsauttaa linkkiä, että tavoitteet ankkuroidun asema rullata laatikossa.
html ( scroll-behavior: smooth; )Syvempi selitys
Odota, odota, mikä on tämä vierityslaatikko, josta puhumme? Se on elementti, jonka sisältö ylittää rajat.
Katso CSS-Tricksin kynän vierityslaatikko (@ css-tricks) CodePenistä.
Huomaa, kuinka yllä olevan demon laatikon kiinteä korkeus on 200px? Kaikki sisältö, joka ylittää tämän korkeuden, on ruudun rajojen ulkopuolella, ja olemme lisänneet overflow-y: scrollsen, että kyseinen lisäsisältö on käytettävissä pystysuunnassa vierittämällä. Tätä tarkoitamme vieritysruudulla.
Oletetaan nyt, että lisäämme navigoinnin laatikon yläosaan jokaisen linkin kohdistaessa kolmeen sisältöosioon:
Katso CSS-Tricksin (@ css-tricks) kynän vierityslaatikko ilman navigointia CodePenissä.
Jokainen linkki vie käyttäjän suoraan vierityskentän eri osioihin. Oletusarvoisesti tämä siirtyminen on äkillinen hyppy.
Tällainen hyppy voi olla pirteä. Siellä scroll-behaviortulee sisään ja antaa meille mahdollisuuden asettaa sujuva vierityssiirtymä. Tällainen asia käytti aiemmin hienoa Javascriptia, mutta scroll-behaviorantaa meille mahdollisuuden tehdä se luonnollisesti CSS: ssä, kun selaintuki paranee.
Syntaksi
.module ( scroll-behavior: ( auto | smooth ); )Arvot
scroll-behaviorOmaisuuden hyväksyy kaksi arvoa, joka olennaisesti toggle tasaisen vierityksen päälle ja pois.
auto(oletus): Tämä arvo sallii äkillisen siirtymisen vierityskentän elementtien välillä.smooth: Nimensä mukaisesti tämä arvo on sujuva animoitu siirtyminen vierityskentän elementtien välillä.
Demo
Seuraava esittely toimii vain Chrome 61+: ssa, Firefox 36+: ssa ja Opera 48+: ssa tämän kirjoituksen aikana.
Katso CSS-Tricksin (@ css-tricks) kynän vierityslaatikko w / `vierityskäyttäytymisestä 'CodePenissä.
Selaimen tuki
Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.
Työpöytä
| Kromi | Firefox | IE | Reuna | Safari |
|---|---|---|---|---|
| 61 | 36 | Ei | 79 | Ei |
Matkapuhelin / tabletti
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ei |
Lisää tietoa
- CSSOM-näyttömoduuli: Luonnosmäärittely, mukaan lukien CSS-ominaisuus. Nykyinen luonnos sisältää suosituksen siirtymisestä
scroll-behaviortoiseen spesifikaatioon, joten on mielenkiintoista nähdä, mihin se laskeutuu. - Mozilla Developer Network: Eritelmän MDN-viite
- Microsoft Edge -alustan tila: Tämän ominaisuuden tila on tällä hetkellä harkittavana
- Chrome-alustan tila: Tämän ominaisuuden tila on tällä hetkellä kehitteillä ja sisältää muiden alustojen tilat sivuna
- Tasainen vierityskoodinpätkä: Katkelmat mahdollistavat sujuvan vierityksen Javascriptin ja jQueryn avulla
- Sujuva vieritys ja helppokäyttöisyys: CSS-temppuja julkaisee Javascript-yhteensopivan sujuvan vierityksen vaikutukset