A scroll-behaviorCSS tulajdonság lehetővé teszi, hogy meghatározzuk, hogy a böngésző görgetési helye új helyre ugrik-e, vagy simán animálja az átmenetet, amikor a felhasználó egy linkre kattint, amely egy gördülő mezőben rögzített helyzetet céloz meg.
html ( scroll-behavior: smooth; )Mélyebb magyarázat
Várj, várj, mi ez a görgető doboz, amiről beszélünk? Ez egy olyan elem, amelynek tartalma túlszárnyalja a határait.
Lásd a CSS-Tricks (@ css-tricks) tollgördítő dobozát a CodePen-en.
Figyelje meg, hogy a fenti bemutató dobozának magassága rögzített-e 200px? Az ezt a magasságot meghaladó tartalom kívül esik a mező határain, és azért tettük hozzá overflow-y: scroll, hogy függőleges görgetéssel hozzáférhetővé tegyük ezt a további tartalmat. Ezt értjük görgető doboz alatt.
Tegyük fel, hogy hozzáadunk egy navigációt a mező tetejéhez, és minden egyes link a tartalom három szakaszát célozza:
Lásd a CSS-Tricks (@ css-tricks) tollgörgető mezőjét a Navigációval a CodePen-en.
Minden hivatkozás a felhasználót közvetlenül a gördítõmező belsejében található tartalom különféle szakaszaihoz viszi. Alapértelmezés szerint ez az átmenet hirtelen ugrás.
Ez a fajta ugrás tépelő lehet. Itt scroll-behaviorjön be, és lehetővé teszi számunkra, hogy gördülékeny átmenetet állítsunk be. Ez a fajta divatos Javascriptet használt, de scroll-behaviorlehetőséget nyújt számunkra, hogy ezt natív módon megcsináljuk a CSS-ben, amint a böngésző támogatása javul.
Szintaxis
.module ( scroll-behavior: ( auto | smooth ); )Értékek
A scroll-behaviortulajdonság két értéket fogad el, amelyek lényegében be- és kikapcsolják a sima görgetés funkciót.
auto(alapértelmezett): Ez az érték lehetővé teszi a görgetőmezőben lévő elemek közötti hirtelen ugrást.smooth: Nevéhez híven ez az érték a gördítõmezőben található elemek közötti zökkenőmentes animált átmenet.
Demó
A következő bemutató csak a Chrome 61+, a Firefox 36+ és az Opera 48+ operációs rendszereken működik az írás idején.
Lásd a CSS-Tricks (@ css-tricks) tollgörgető mezőjét, a "scroll-behavior" -val a CodePen-en.
Böngésző támogatás
Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.
Asztal
| Króm | Firefox | AZAZ | Él | Szafari |
|---|---|---|---|---|
| 61 | 36 | Nem | 79 | Nem |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81. | Nem |
Több információ
- CSSOM nézet modul: A specifikáció vázlata, a CSS tulajdonsággal együtt. A jelenlegi tervezet tartalmaz egy ajánlást a
scroll-behaviormásik specifikációra való áttéréshez , így érdekes lesz látni, hogy ez hol landol. - Mozilla Developer Network: A specifikáció MDN hivatkozása
- Microsoft Edge Platform állapota: Jelenleg a szolgáltatás állapota megfontolás alatt áll
- Chrome Platform állapota: Jelenleg ennek a funkciónak az állapota fejlesztés alatt áll, és félelemként tartalmazza a többi platform állapotát is
- Sima görgetésrészlet: Kivonatok a zökkenőmentes görgetés engedélyezéséhez a Javascript és a jQuery használatával
- Sima görgetés és hozzáférhetőség: A CSS-trükkök közzéteszik a Javascript-kompatibilis sima görgetés hatását