Introduzione ai CSS Snap Snap Points

Il Modulo CSS Scroll Snap è uno standard web che ci dà un po 'di controllo scorrendo su una pagina web in modo che possiamo far scorrere gli utenti verso determinate parti di una pagina piuttosto che su qualsiasi punto.

scorrimento è una delle azioni più eseguite su un sito web. I browser, nel corso degli anni, hanno migliorato le loro prestazioni di scorrimento per abbinare la forza delle dita agili degli utenti. E gli sviluppatori hanno usato scorrendo creativamente per ottenere un'esperienza utente migliore o pronta all'uso.

Tuttavia, quando si tratta della correlazione tra codifica e scorrimento, solo JavaScript sembrava avere un certo controllo su quest'ultimo. Questo è stato così per un lungo periodo di tempo, ma con il introduzione di punti di snap scroll, CSS ha iniziato a recuperare.

Scorrimento senza punti di snapshot

In genere, non scorriamo molto lentamente, specialmente sui telefoni. Più velocemente scorri, meno controllo hai dove sullo schermo finirai quando hai smesso di scorrere.

Immagina di scorrere una serie di immagini del prodotto su un sito Web o una galleria di foto o diapositive online. Quello che preferiresti in tali applicazioni è vedere l'intero prodotto, foto o diapositiva ogni volta che scorri. Non solo a parte dell'immagine del prodotto, della foto o della diapositiva.

Ad esempio, nella demo qui sotto puoi vedere ogni volta che l'utente smette di scorrere, solo circa la metà dell'immagine è visibile nella parte inferiore dello schermo. Tuttavia, la maggior parte degli utenti preferirebbe vedere l'ultima immagine completamente.

Scorrimento con punti snap di scorrimento

Questo è dove portiamo Punti di scorrimento scroll CSS. Il nome è auto-esplicativo; è uno standard CSS che ci permette di schiocca gli oggetti in posizione durante lo scorrimento.

Ci sono cinque proprietà CSS che costituiscono questo standard:

1. scroll-snap-tipo
2. scroll-snap-punti-x
3. scroll-snap-punti-y
4. scroll-snap-coordinare
5. scroll-snap-destinazione

Supporto per il browser

Le proprietà bisogno -webkit e -Signorina prefissi per i browser pertinenti. Al momento di scrivere questo articolo, lo snap scroll CSS non è supportato in Chrome e Opera.

Si noti che le ultime quattro proprietà potrebbero essere eliminate dagli agenti utente nel prossimo futuro. Anziché, nuove proprietà, cioè scroll-snap-align, scroll-snap-margine, e scroll-snap-padding, potrebbe essere creato, come definito in questa specifica.

Tuttavia, lo faranno hanno uno scopo simile come le precedenti proprietà. Attualmente, l'ex set di proprietà funzionerà perfettamente.

Proprietà

Devi Aggiungi il scroll-snap-tipo proprietà al contenitore di scorrimento (l'elemento contenitore i cui figli stanno straripando mentre scorre). Specifica il rigore dell'azione a scatto. Può assumere tre valori:

1. obbligatorio - quando lo scorrimento è finito, lo scorrimento avverrà agganciare a un punto di snap pertinente
2. prossimità - meno severo di obbligatorio; lo farà dipende dal giudizio del UA se l'elemento si agganci ad un dato punto di scatto
3. nessuna - non è stato eseguito lo snap

Il scroll-snap-punti-x e scroll-snap-punti-y proprietà appartiene al contenitore di scorrimento, pure. Si riferiscono ai punti sull'asse X e Y in cui saranno presenti i punti di snap. Il loro valore è dato dal ripetere() funzione. Ad esempio, se si desidera aggiungere punti di snap lungo l'asse x all'intervallo di 100px devi usare il scroll-snap-points-x: repeat (100px) regola.

Il scroll-snap-destinazione la proprietà viene inoltre aggiunta al contenitore di scorrimento. esso definisce una coordinata sul contenitore dove si trova una destinazione a schiocco. È in questa destinazione di snap in cui i bambini del contenitore si agganciano in posizione quando vengono fatti scorrere.

Puoi usare il scroll-snap-coordinare proprietà in congiunzione con scroll-snap-destinazione. È necessario aggiungerlo agli elementi figlio del contenitore. esso definisce le coordinate degli elementi figli, che si allineerà con le coordinate di destinazione del contenitore di scroll quando l'utente scorre lo schermo.

Nota che non devi usare tutte le proprietà contemporaneamente. Solo scroll-snap-tipo è obbligatorio. Oltre a ciò, è possibile definire singoli punti di snap o utilizzare la combinazione di coordinate di destinazione.

Esempio di codice

Ecco un esempio di snippet di codice per a tipico contenitore di scorrimento, con scorrendo in direzione verticale e alcune immagini all'interno. Emette la demo che puoi trovare all'inizio di questo post.

 div width: 300px; altezza: 300 px; overflow: auto; ... div> img larghezza: 250px; altezza: 150px; ... 

Ora noi aggiungi alcuni punti snap al contenitore di scorrimento:

 div width: 300px; overflow: auto; scroll-snap-points-y: repeat (150px); scroll-snap-type: obbligatorio;  

Di seguito, puoi vedere come appare l'output Aggiunti punti snap CSS. Notare ogni volta che lo scorrimento si interrompe mentre l'immagine in basso è solo parzialmente visibile, il appare l'immagine completa dopo che lo scrollport si apre in un punto di snap sopra di esso.