Rulle-polstring - CSS-tricks

Anonim

scroll-paddinger en del af CSS Scroll Snap-modulet. Scroll snapping refererer til "låsning" af visningsportens placering til bestemte elementer på siden, når vinduet (eller en rullebar container) rulles. Tænk på en rulle-snappende beholder som at placere en magnet oven på et element, der klæber til toppen af ​​visningsporten og tvinger siden til at stoppe med at rulle lige der.

scroll-paddinger en valgfri egenskab til enhver rulle-snapping container. Scroll-snapping containere defineres, når scroll-snap-typeejendommen er indstillet til en værdi udover none. For mere information om rulle-snapping containere se scroll-snap-typealmanak posten.

OK, så gå videre til rullepolstring

scroll-paddingbruges til at justere snappebeholderens optimale synsområde. Dette er nyttigt, hvis beholderen har elementer såsom et fast overskrift, der skjuler elementer indeni, eller hvis den rullebare beholder har brug for lidt plads til at give de indvendige elementer plads til at trække vejret, når de er blevet ”snappet” på plads.

Et simpelt eksempel ville være at bruge scroll-paddingtil at oprette en bestemt afstand mellem 50pxtoppen og venstre side af containeren:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Områderne i lyserød viser rulleudfyldningen på den rulle-snappende beholder.

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);

Vigtig note om longhands: Chrome understøtter i øjeblikket ikke langhåndsformat scroll-paddingog scroll-marginegenskaber. Brug stenografi til maksimal browsersupport. Se dette problem i chromium bug tracker for flere detaljer og den aktuelle status.

Værdier

scroll-padding accepterer følgende værdier:

  • autoefterlader polstringen at blive bestemt af browseren / brugeragenten. Generelt betyder dette en værdi på 0 pixel, men kan være ikke-nul, hvis brugeragenten beslutter, at en anden værdi er mere passende.
  • skrives ligner paddingog andre egenskaber, hvor værdien kan defineres med enheder ( px, em, vh, etc.) eller som en procentdel af selve beholderen.

Eksempel

Se eksemplet
på rullepolstring af pen fra 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
69 68 11 * 79 11

Mobil / tablet

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

Relaterede

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

Ressourcer

  • CSS Scroll Snap W3C kandidatanbefaling
  • Praktisk CSS Scroll Snapping
  • Introduktion til CSS Scroll Snap Points