Rulle-polstring - CSS-triks

Anonim

scroll-paddinger en del av CSS Scroll Snap Module. Rulling snapping refererer til å "låse" posisjonen til visningsområdet til spesifikke elementer på siden når vinduet (eller en rullbar beholder) rulles. Tenk på en rullesnekkende beholder som å sette en magnet på toppen av et element som holder seg til toppen av visningsområdet og tvinger siden til å slutte å rulle akkurat der.

scroll-paddinger en valgfri egenskap for en hvilken som helst rulle-snapping container. Scroll-snapping containere er definert når scroll-snap-typeeiendommen er satt til en verdi i tillegg none. For mer informasjon om rullesnippere, se scroll-snap-typealmanakkoppføringen.

OK, så gå videre til rullepolstring

scroll-paddingbrukes til å justere snappebeholderens optimale synsområde. Dette er nyttig hvis beholderen har elementer som et fast overskrift som vil skjule elementer inne eller hvis den rullbare beholderen trenger litt plass for å gi de indre elementene rom til å puste når de har blitt "snappet" på plass.

Et enkelt eksempel kan være å bruke scroll-paddingtil å lage noen faste avstander 50pxpå toppen og venstre side av beholderen:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Områdene i rosa viser rullepolstringen på rulleknappen.

Syntaks

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Viktig merknad om langhender: Chrome støtter for øyeblikket ikke langhåndsformat scroll-paddingog scroll-marginegenskaper. Bruk stenografi for maksimal støtte for nettleseren. Se dette problemet på kromfeilsporeren for mer informasjon og gjeldende status.

Verdier

scroll-padding aksepterer følgende verdier:

  • autolar polstringen bli bestemt av nettleseren / brukeragenten. Generelt betyr dette en verdi på 0px, men kan være ikke-null hvis brukeragenten bestemmer at en annen verdi er mer passende.
  • er skrevet lik paddingog andre egenskaper, hvor verdien kan defineres med enheter ( px, em, vh, etc.) eller som en prosentandel av selve beholderen.

Eksempel

Se pennens eksempel på rulling-polstring
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
69 68 11 * 79 11

Mobil / nettbrett

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

I slekt

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Ressurser

  • CSS Scroll Snap W3C kandidatanbefaling
  • Praktisk CSS Scroll Snapping
  • Vi presenterer CSS Scroll Snap Points