Scroll-snap-align - CSS-trucs

Anonim

scroll-snap-alignmaakt 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-snap-alignis een vereiste eigenschap voor een scroll-snapping-element binnen een scroll-snapping-container. Zie het scroll-snap-typealmanakitem voor meer informatie over containers die scrollen . scroll-snap-alignvertelt de browser die deel uitmaken van een element moet worden aangepast wanneer een handomdraai punt tegengekomen: Moet het element uitgelijnd op het start, centerof endvan de bovenliggende container die het bevat scroll-snap-typewoning?

Als je wilt dat een element aan het begin van dat element vastklikt, geef het dan een scroll-snap-alignwaarde als volgt:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Syntaxis

scroll-snap-align: ( none | start | end | center )(1,2)

U kunt maximaal 2 waarden voor deze eigenschap specificeren, die respectievelijk de blok- en lijnassen vertegenwoordigen. Geef je maar 1 waarde, dan wordt die waarde voor beide assen gebruikt.

Waarden

scroll-snap-align accepteert de volgende waarden:

  • none schakelt het scrollen van het element uit
  • start lijnt de start van het element uit met de snapport van de schuifcontainer wanneer deze op zijn plaats wordt geklikt
  • end lijnt het uiteinde van het element uit met de snappoort van de schuifcontainer wanneer het op zijn plaats wordt geklikt
  • center lijnt het midden van het element uit met de snappoort van de schuifcontainer wanneer deze op zijn plaats wordt geklikt

Voorbeeld

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-padding
  • scroll-snap-stop

Middelen

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