Scroll-opvulling - CSS-trucs

Anonim

scroll-paddingmaakt 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-paddingis een optionele eigenschap voor elke container met scroll-snapping. Containers met scroll-snapping worden gedefinieerd wanneer de scroll-snap-typeeigenschap is ingesteld op een andere waarde none. Zie het scroll-snap-typealmanakitem voor meer informatie over containers die scrollen .

OK, dus ga verder met scrollen

scroll-paddingwordt gebruikt om het optimale kijkgebied van de snapcontainer aan te passen. Dit is handig als de container elementen heeft zoals een vaste header die elementen binnenin zou verdoezelen of als de schuifbare container wat ruimte nodig heeft om de interieurelementen ruimte te geven om te ademen nadat ze op hun plaats zijn "geklikt".

Een eenvoudig voorbeeld zou zijn scroll-paddingom een ​​vaste afstand 50pxaan de boven- en linkerkant van de container te creëren :

.scroll-container ( scroll-padding: 50px 0 0 50px; )
De roze gebieden tonen de scroll-padding op de scroll-snap-container.

Syntaxis

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

Belangrijke opmerking over longhands: Chrome ondersteunt 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-padding accepteert de volgende waarden:

  • autolaat de opvulling te bepalen door de browser / user-agent. Over het algemeen betekent dit een waarde van 0px, maar het kan niet nul zijn als de user-agent besluit dat een andere waarde geschikter is.
  • geschreven vergelijkbaar met paddingandere eigenschappen wanneer deze waarde kan worden bepaald met eenheden ( px, em, vh, enz.) of als percentage van de houder zelf.

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-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Middelen

  • CSS Scroll Snap W3C Kandidaataanbeveling
  • Praktische CSS Scroll Snapping
  • Introductie van CSS Scroll Snap Points