Scroll-snap-stop - CSS-trucs

Anonim

scroll-snap-stopmaakt 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-stopis 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 .

scroll-snap-stopstelt u in staat om de scroll-snapping-container te forceren om naar een bepaald element te snappen. Stel dat je binnen een scroll-snapping-container scrolt en je hem een ​​gigantische draai-van-het-muiswiel geeft. Normaal gesproken laat de browser de snelheid van uw scrollen voorbij snappunten vliegen totdat deze zich vestigt op een snappunt dichtbij waar het scrollen normaal zou eindigen. Door in te stellen, scroll-snap-stopkunt u de browser vertellen dat deze moet stoppen op een bepaald element voordat de gebruiker er langs mag.

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

Syntaxis

scroll-snap-stop: normal | always;

Waarden

scroll-snap-stop accepteert de volgende waarden:

  • normal is de standaardwaarde waarmee u langs een element kunt scrollen zonder te klikken
  • always zal de browser dwingen om naar dit element te snappen, zelfs als de scroll normaal voorbij dit element zou gaan

Voorbeeld

Zie het voorbeeld
van de scroll-snap-stop 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

Houd er rekening mee dat Chrome scroll-snap-stop: always;momenteel mogelijk geen ondersteuning biedt .

Verwant

  • scroll-snap-type
  • scroll-margin
  • scroll-padding
  • scroll-snap-align

Middelen

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