Den scroll-behavioreiendom i CSS tillater oss å definere om bla plasseringen av nettleseren hopper til et nytt sted eller jevnt animerer overgangen når en bruker klikker på en link som mål en forankret posisjon innenfor en rulle-boksen.
html ( scroll-behavior: smooth; )Dypere forklaring
Vent, vent, hva er denne rulleboksen vi snakker om? Det er et element med innhold som renner over grensene.
Se pennens rulleboks av CSS-Tricks (@ css-tricks) på CodePen.
Legg merke til hvordan boksen i demoen ovenfor har en fast høyde på 200px? Alt innhold som overstiger den høyden, ligger utenfor rammen for boksen, og vi har lagt overflow-y: scrolltil for å gjøre det ekstra innholdet tilgjengelig med vertikal rulling. Det er det vi mener med en rulleboks.
La oss si at vi legger til en navigasjon øverst i boksen med hver lenke som er målrettet mot de tre innholdsseksjonene:
Se pennens rulleboks med Nav av CSS-Tricks (@ css-tricks) på CodePen.
Hver lenke tar brukeren direkte til de forskjellige delene av innholdet inne i rulleboksen. Som standard er denne overgangen mellom et brått hopp.
Den slags hopp kan være skurrende. Det er der det scroll-behaviorkommer inn og lar oss sette en jevn rulleovergang. Denne typen ting pleide å ta fancy Javascript, men scroll-behaviorvil gi oss muligheten til å gjøre det naturlig i CSS, når nettleserstøtten forbedres.
Syntaks
.module ( scroll-behavior: ( auto | smooth ); )Verdier
Det scroll-behavioraksepteres to verdier, som i hovedsak vippe den glatte rulle på og av.
auto(standard): Denne verdien tillater et brått hopp mellom elementene i rulleboksen.smooth: I samsvar med navnet er denne verdien den jevne animerte overgangen mellom elementene i rulleboksen.
Demo
Følgende demo fungerer bare på Chrome 61+, Firefox 36+ og Opera 48+ når dette skrives.
Se pennens rulleboks med `` scroll-behavior '' av CSS-Tricks (@ css-tricks) på CodePen.
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 61 | 36 | Nei | 79 | Nei |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | Nei |
Mer informasjon
- CSSOM View Module: Utkastsspesifikasjonen, inkludert CSS-egenskapen. Gjeldende utkast inkluderer en anbefaling om å flytte
scroll-behaviortil en annen spesifikasjon, så det vil være interessant å se hvor det lander. - Mozilla Developer Network: MDN-referansen for spesifikasjonen
- Microsoft Edge Platform Status: Viser for øyeblikket statusen til denne funksjonen som under vurdering
- Chrome Platform Status: Viser for øyeblikket statusen til denne funksjonen som under utvikling og inkluderer statuser for andre plattformer som en side
- Smooth Scrolling Snippet: Snippets for å aktivere jevn rulling med Javascript og jQuery
- Jevn rulling og tilgjengelighet: Et CSS-triks-innlegg om virkningen av Javascript-aktivert jevn rulling