Rullemargin - CSS-triks

Anonim

scroll-marginer 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-marginer en valgfri egenskap for et rulle-snapping element i en rulle-snapping container. For mer informasjon om rullesnippere, se scroll-snap-typealmanakkoppføringen.

Angi rullemargin

scroll-marginbrukes til å justere et elements snappområde (boksen som definerer hvor elementet skal knipses til). Legge til scroll-marginer nyttig når du trenger å gi et element plass fra kanten av beholderen når du klikker på plass, men muliggjør situasjoner der hvert element kan trenge litt forskjellig avstand. Hvis alle elementene har de samme avstandskravene, bør du vurdere å bruke scroll-paddingden på hovedbeholderen i stedet for scroll-marginfordi det påvirker avstanden for alle elementene i beholderen.

Et enkelt eksempel der det scroll-margintillates 50px avstand rundt toppen og venstre på et element ser slik ut:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Det rosa området representerer scroll-marginpå dette elementet.

Syntaks

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

Viktig merknad om longhands: Chrome (og muligens andre nettlesere) støtter foreløpig ikke langhåndsformat scroll-paddingog scroll-marginegenskaper. Bruk stenografi for maksimal støtte for nettleseren. Se dette problemet på chromium bug tracker for mer informasjon og gjeldende status.

Verdier

scroll-margingodtar det følgende en lengdeverdi, som er skrevet i likhet med marginog andre egenskaper, hvor verdien kan defineres med enheter ( px, em, vh, etc). Se W3C Values ​​and Units Module for mer informasjon. Prosentandeler kan ikke brukes til scroll-marginper spesifikasjonen.

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