Rulle-margen - CSS-tricks

Anonim

scroll-marginer 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-marginer en valgfri egenskab til et rulle-snapping-element i en rulle-snap-container. For mere information om rulle-snapping containere se scroll-snap-typealmanak posten.

Indtast rullemargen

scroll-marginbruges til at justere elementets snap-område (feltet, der definerer, hvor elementet skal snappes til). Tilføjelse scroll-marginer nyttigt, når du har brug for at give et element plads fra kanten af ​​beholderen, når du klikker på plads, men giver mulighed for situationer, hvor hvert element muligvis har brug for en lidt anden afstand. Hvis alle elementer har de samme afstandskrav, skal du overveje at bruge scroll-paddingpå den overordnede container i stedet for, scroll-marginfordi det påvirker afstanden for alle elementer i containeren.

Et simpelt eksempel, hvor det scroll-margingiver mulighed for 50 pixel mellemrum øverst og venstre på et element ser sådan ud:

.scroll-element ( scroll-margin: 50px 0 0 50px; )
Det lyserøde område repræsenterer scroll-marginpå dette element.

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

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

Værdier

scroll-marginaccepterer følgende en længde værdi, der er skrevet ligner marginog andre ejendomme, hvor værdien kan defineres med enheder ( px, em, vhosv). Se W3C-værdier og enheder-modulet for at få flere oplysninger. Procentdele kan ikke bruges til scroll-marginpr. Specifikationen.

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