scroll-behaviorHotel v CSS nam omogoča, da določite, ali je lokacija za pomikanje brskalnika skoči na novo lokacijo ali gladko animira prehod, ko uporabnik klikne na povezavo, ki cilja na stavi položaj v drsenja polje.
html ( scroll-behavior: smooth; )Poglobljena razlaga
Čakaj, čakaj, o čem govorimo o tem drsnem polju? Je element z vsebino, ki presega svoje meje.
Oglejte si polje za pomikanje s pisalom s strani CSS-Tricks (@ css-tricks) na CodePen.
Opazite, kako ima polje v predstavitvi zgoraj fiksno višino 200px? Vsaka vsebina, ki presega to višino, je zunaj okvirov polja in dodali smo, overflow-y: scrollda je ta dodatna vsebina dostopna z navpičnim pomikanjem. To mislimo pod drsnim poljem.
Zdaj recimo, da na vrh polja dodamo navigacijo, pri čemer vsaka povezava cilja na tri odseke vsebine:
Glejte Pen Scrolling Box w / Nav by CSS-Tricks (@ css-tricks) na CodePen.
Vsaka povezava vodi uporabnika neposredno do različnih odsekov vsebine znotraj drsnega polja. Privzeto je ta prehod med naglim skokom.
Takšen skok je lahko moteč. Tu scroll-behaviorpride in nam omogoči nemoten prehod med drsenjem. Takšne stvari so prej uporabljale domišljijski Javascript, vendar scroll-behaviornam bodo to omogočile v CSS, ko se bo podpora brskalnika izboljšala.
Sintaksa
.module ( scroll-behavior: ( auto | smooth ); )Vrednote
scroll-behaviorPremoženje sprejme dve vrednosti, ki je v bistvu preklop nemoteno drsenje funkcijo in izklop.
auto(privzeto): Ta vrednost omogoča nenaden preskok med elementi znotraj drsnega polja.smooth: Ta vrednost, ki ustreza svojemu imenu, je gladek animirani prehod med elementi znotraj drsnega polja.
Demo
Naslednja predstavitev bo v času pisanja tega dokumenta delovala samo v brskalnikih Chrome 61+, Firefox 36+ in Opera 48+.
Glejte Pen Scrolling Box w / `scroll-behaviour` s strani CSS-Tricks (@ css-tricks) na CodePen.
Podpora za brskalnik
Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.
Namizje
| Chrome | Firefox | IE | Rob | Safari |
|---|---|---|---|---|
| 61 | 36 | Ne | 79 | Ne |
Mobilni / tablični računalnik
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ne |
Več informacij
- Modul pogleda CSSOM: Osnutek specifikacije, vključno z lastnostjo CSS. Trenutni osnutek vključuje priporočilo za prestavitev
scroll-behaviorna drugo specifikacijo, zato bo zanimivo videti, kje ta pristane. - Mozilla Developer Network: referenca MDN za specifikacijo
- Stanje platforme Microsoft Edge: trenutno prikazuje stanje te funkcije kot Razmislek
- Stanje platforme Chrome: trenutno prikazuje stanje te funkcije kot »V razvoju« in vključuje stanja za druge platforme
- Delček gladkega drsenja: delčki, ki omogočajo gladko drsenje z Javascriptom in jQueryjem
- Gladko drsenje in dostopnost: Prispevek CSS-trikov o vplivu gladkega drsenja, ki ga podpira Javascript