Scroll-snap-type - CSS-trucs

Anonim

De scroll-snap-typeeigenschap maakt 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. Zie het als het plaatsen van een magneet op een element dat aan de bovenkant van de viewport blijft plakken en de pagina dwingt om daar te stoppen met scrollen.

Dit is handig als u de browser op specifieke punten op de pagina wilt stoppen. Bijvoorbeeld: een gebruiker die door een fotogalerij bladert, wil waarschijnlijk niet halverwege een afbeelding scrollen - ze geven er waarschijnlijk de voorkeur aan dat de afbeelding tijdens het scrollen op de juiste positie 'klikt'. Scroll-snapping biedt ontwikkelaars een pure CSS-manier om met dit gedrag om te gaan.

scroll-snap-typeis een vereiste eigenschap voor elke schuifbare container waaraan u scroll-snapping wilt toevoegen. Het beantwoordt drie vragen voor een scroll-container:

  1. Gebruikt de container scroll-snapping?
  2. Op welke as - x (horizontaal), y (verticaal), blok of inline - moet scrollen worden toegepast?
  3. Hoe moet scroll-snapping zich gedragen? Wordt het 100% van de tijd geforceerd, of treedt het alleen in werking wanneer de gebruiker "dichtbij genoeg" komt bij een klikpositie? Hierover later meer.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Syntaxis

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Waarden

scroll-snap-type accepteert de volgende waarden:

  • none schakelt het scrollen uit.
  • x maakt scrollen alleen langs de x-as mogelijk.
  • y maakt scrollen alleen langs de y-as mogelijk.
  • block maakt scrollen alleen langs de blokas mogelijk.
  • inline maakt scrollen alleen langs de inline-as mogelijk.
  • bothmaakt scrollen langs beide assen mogelijk (die u kunt zien als xen y, of inlineen block.
  • mandatory is een striktheidswaarde die de browser vertelt om altijd naar een snappositie te gaan wanneer er niet wordt gescrolld.
  • proximityis een striktheidswaarde die de browser vertelt om naar een snappositie te gaan als een scrollactie vrij dicht bij een snappositie komt. Als het niet redelijk dichtbij is, zou de browser niet moeten klikken en zal het scrollen normaal werken.

Voorbeeld

Zie het voorbeeld
van het scroll-snap-type 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-padding
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Middelen

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