scroll-marginmaakt deel uit van de CSS Scroll Snap Module. Scroll snapping verwijst naar het "vergrendelen" van de positie van de viewport aan specifieke elementen op de pagina terwijl het venster (of een scrollbare container) wordt gescrolld. Denk aan een container die een scroll-snapping uitvoert, zoals het plaatsen van een magneet bovenop een element dat aan de bovenkant van de viewport blijft plakken en de pagina dwingt om daar te stoppen met scrollen.
scroll-marginis een optionele eigenschap voor een scroll-snapping-element binnen een scroll-snapping-container. Zie het scroll-snap-typealmanakitem voor meer informatie over containers die scrollen .
Voer de schuifmarge in
scroll-marginwordt gebruikt om het snapgebied van een element aan te passen (het vak dat definieert waar het element naar wordt geklikt). Toevoegen scroll-marginis handig wanneer u een element ruimte moet geven vanaf de rand van de container wanneer deze op zijn plaats wordt geklikt, maar waarbij situaties worden toegestaan waarin elk element een iets andere tussenruimte nodig heeft. Als alle elementen dezelfde afstandsvereisten hebben, overweeg dan om scroll-paddingop de bovenliggende container te gebruiken in plaats van scroll-marginomdat dit de tussenruimte voor alle elementen in de container beïnvloedt.
Een eenvoudig voorbeeld waarbij scroll-margin50px ruimte rond de boven- en linkerkant van een element mogelijk is, ziet er als volgt uit:
.scroll-element ( scroll-margin: 50px 0 0 50px; )
scroll-marginop dit element.
Syntaxis
/* 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);Belangrijke opmerking over longhands: Chrome (en mogelijk andere browsers) ondersteunen momenteel geen longhand-formaat scroll-paddingen scroll-margineigenschappen. Gebruik de afkorting voor maximale browserondersteuning. Zie dit probleem op de Chromium-bugtracker voor meer details en de huidige status.
Waarden
scroll-marginaanvaardt de volgende lengte waarde die vergelijkbaar is geschreven marginen andere eigenschappen wanneer deze waarde kan worden bepaald met eenheden ( px, em, vh, enz). Zie de W3C-module met waarden en eenheden voor meer informatie. Percentages kunnen niet worden gebruikt voor scroll-marginvolgens de specificatie.
Voorbeeld
Zie het voorbeeld
van de scroll-padding van de pen door CSS-Tricks (@ css-tricks) op CodePen.
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 69 | 68 | 11 * | 79 | 11 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 11.0-11.2 |
Verwant
scroll-snap-typescroll-marginscroll-snap-alignscroll-snap-stop
Middelen
- CSS Scroll Snap W3C Kandidaataanbeveling
- Praktische CSS Scroll Snapping
- Introductie van CSS Scroll Snap Points