Rulla-stoppning - CSS-tricks

Anonim

scroll-paddingär en del av CSS Scroll Snap Module. Scroll snapping hänvisar till att "låsa" positionen för visningsområdet för specifika element på sidan när fönstret (eller en rullbar behållare) rullas. Tänk på en rullningsfångande behållare som att sätta en magnet ovanpå ett element som håller sig till toppen av visningsområdet och tvingar sidan att sluta rulla där.

scroll-paddingär en valfri egenskap för valfri behållare för rullning. Scroll-snapping behållare definieras när scroll-snap-typeegenskapen är inställd på något värde förutom none. För mer information om rullningsfästande behållare se scroll-snap-typealmanackposten.

OK, så gå vidare till rullning-padding

scroll-paddinganvänds för att justera snäppbehållarens optimala visningsregion. Detta är användbart om behållaren har element som ett fast sidhuvud som skulle dölja element inuti eller om den rullningsbara behållaren behöver lite utrymme för att ge de inre elementen utrymme att andas när de har ”snäppits” på plats.

Ett enkelt exempel skulle vara att använda för scroll-paddingatt skapa ett visst avstånd 50pxpå toppen och vänster om behållaren:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Områdena i rosa visar rullningspolstringen på behållaren för rullning.

Syntax

/* 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 anmärkning om longhands: Chrome stöder för närvarande inte longhand-format scroll-paddingoch scroll-marginegenskaper. Använd stenografi för maximalt webbläsarsupport. Se det här problemet i kromfelspåraren för mer information och aktuell status.

Värden

scroll-padding accepterar följande värden:

  • autolämnar stoppningen för att bestämmas av webbläsaren / användaragenten. Generellt betyder detta ett värde på 0px, men kan vara icke-noll om användaragenten bestämmer att ett annat värde är mer lämpligt.
  • skrivs liknande paddingoch andra egenskaper där kan definieras värdet med enheter ( px, em, vh, etc.) eller som en procentandel av själva behållaren.

Exempel

Se exemplet
med rullning av pennor från CSS-Tricks (@ css-tricks) på CodePen.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.

Skrivbord

Krom Firefox IE Kant Safari
69 68 11 * 79 11

Mobil / surfplatta

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

Relaterad

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

Resurser

  • CSS Scroll Snap W3C kandidatrekommendation
  • Praktisk rullning av CSS
  • Introduktion till CSS Scroll Snap Points