Den scroll-behaviorejendom i CSS giver os mulighed for at definere, om scroll placeringen af browseren springer til en ny placering eller glat animerer overgangen når en bruger klikker på et link, som mål en forankret position inden for en rulle kassen.
html ( scroll-behavior: smooth; )Dybere forklaring
Vent, vent, hvad er dette rullefelt, vi taler om? Det er et element med indhold, der overskrider dets grænser.
Se pennens rulleboks af CSS-Tricks (@ css-tricks) på CodePen.
Læg mærke til, hvordan feltet i demoen ovenfor har en fast højde på 200px? Alt indhold, der overstiger denne højde, ligger uden for boksens rammer, og vi har tilføjet for overflow-y: scrollat gøre det ekstra indhold tilgængeligt med lodret rulning. Det er hvad vi mener med et rullefelt.
Lad os sige, at vi tilføjer en navigation til toppen af feltet med hvert link, der er målrettet mod de tre indholdssektioner:
Se pennens rulleboks m / Nav af CSS-Tricks (@ css-tricks) på CodePen.
Hvert link fører brugeren direkte til de forskellige sektioner af indhold inde i rulleboksen. Som standard er denne overgang mellem et brat spring.
Den slags spring kan være skurrende. Det er her, der scroll-behaviorkommer ind og giver os mulighed for at indstille en jævn rulleovergang. Denne slags ting bruges til at tage fancy Javascript, men scroll-behaviorvil give os muligheden for at gøre det indbygget i CSS, når browsersupport forbedres.
Syntaks
.module ( scroll-behavior: ( auto | smooth ); )Værdier
Den scroll-behaviorejendom accepterer to værdier, som i det væsentlige skifte funktionen Jævn rulning til og fra.
auto(standard): Denne værdi tillader et pludseligt spring mellem elementer i rulleboksen.smooth: I overensstemmelse med navnet er denne værdi den glatte animerede overgang mellem elementer i rulleboksen.
Demo
Den følgende demo fungerer kun på Chrome 61+, Firefox 36+ og Opera 48+ på tidspunktet for denne skrivning.
Se pennens rulleboks med "rulleopførsel" af CSS-Tricks (@ css-tricks) på CodePen.
Browsersupport
Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 61 | 36 | Ingen | 79 | Ingen |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Ingen |
Mere information
- CSSOM View Module: Udkastsspecifikationen, inklusive CSS-egenskaben. Det nuværende udkast inkluderer en anbefaling om at flytte
scroll-behaviortil en anden specifikation, så det vil være interessant at se, hvor det lander. - Mozilla Developer Network: MDN-referencen til specifikationen
- Microsoft Edge Platform Status: Viser i øjeblikket status for denne funktion som under overvejelse
- Chrome Platform Status: Viser i øjeblikket status for denne funktion som under udvikling og inkluderer status for andre platforme som en side
- Smooth Scrolling Snippet: Snippets for at muliggøre jævn rulning med Javascript og jQuery
- Jævn rulning og tilgængelighed: Et CSS-Tricks-indlæg om virkningen af Javascript-aktiveret jævn rulning