Scorrimento-snap-stop - Trucchi CSS

Anonim

scroll-snap-stopfa parte del CSS Scroll Snap Module. Lo snap a scorrimento si riferisce al "blocco" della posizione della finestra su elementi specifici della pagina durante lo scorrimento della finestra (o di un contenitore scorrevole). Pensa a un contenitore a scorrimento come mettere un magnete sopra un elemento che si attacca alla parte superiore della visualizzazione e forza la pagina a smettere di scorrere proprio lì.

scroll-snap-stopè una proprietà facoltativa per un elemento a scorrimento all'interno di un contenitore a scorrimento. Per ulteriori informazioni sui contenitori a scorrimento, vedere la scroll-snap-typevoce dell'almanacco.

scroll-snap-stopconsente di forzare il contenitore a scorrimento per agganciarsi a un particolare elemento. Supponiamo che stavi scorrendo all'interno di un contenitore a scorrimento e gli hai dato una gigantesca rotellina del mouse. Normalmente, il browser lascia che la velocità del tuo scorrimento voli oltre i punti di snap fino a quando non si ferma su un punto di snap vicino al punto in cui normalmente terminerebbe lo scorrimento. Impostando scroll-snap-stoppuoi dire al browser che deve fermarsi su un particolare elemento prima di consentire all'utente di oltrepassarlo.

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

Sintassi

scroll-snap-stop: normal | always;

Valori

scroll-snap-stop accetta i seguenti valori:

  • normal è il valore predefinito e consente di far scorrere un elemento oltre senza eseguire lo snap
  • always costringerà il browser ad agganciarsi a questo elemento, anche se lo scorrimento normalmente supererebbe questo elemento

Esempio

Vedi l'esempio di scorrimento-snap-stop della penna
di CSS-Tricks (@ css-tricks) su CodePen.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
69 68 11 * 79 11

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Tieni presente che Chrome potrebbe non supportare scroll-snap-stop: always;al momento.

Relazionato

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

Risorse

  • Raccomandazione del candidato CSS Scroll Snap W3C
  • Pratico CSS Scroll Snapping
  • Presentazione di CSS Scroll Snap Points