Share
Può essere difficile per gli sviluppatori Web garantire un'esperienza di scorrimento ben controllata, ma fortunatamente un modulo CSS intitolato "Scroll Snap" promette di aiutare. Impone dove una posizione di scorrimento termina dopo che un'operazione di scorrimento è stata completata.
Tra le altre cose, questo modulo contiene funzionalità per controllare facet come panning, combinato con "posizioni di snap" e produce un particolare allineamento di contenuto all'interno di un contenitore a scorrimento.
Il W3C ha recentemente pubblicato Scroll Snap come una Candidate Recommendation che include implementazioni ed esempi ben pensati insieme alla sintassi aggiornata. Tuffiamoci dentro.
Per comprendere appieno il potere dello scroll snapping e come funziona, dobbiamo capirne la terminologia. Così facendo si evita anche la confusione quando questi nuovi termini vengono utilizzati in questo tutorial.
Lo snap scroll si svolge all'interno di un "snapport" o "scrollport"; tuttavia, entrambi significano lo stesso, e possono anche essere indicati come "contenitore di scorrimento". Questa è la regione in cui risiede il comportamento dello scroll scroll come indicato nel diagramma sopra (bordo tratteggiato esterno). Le intenzioni sono di aiutare a rafforzare le posizioni di scorrimento a cui termina lo scorrimento di un contenitore di scorrimento dopo che è stata completata un'operazione di scorrimento.
Ogni elemento di questo "snapport" viene definito "area di snap" ed è l'oggetto o gli oggetti a cui puntare. Ogni area di snap contiene una "posizione di snap" definita anche dalla "posizione di snap" del contenitore di scorrimento e rappresentata dalla linea tratteggiata rossa nello schema sopra.
Con la terminologia fuori mano, esaminiamo alcuni esempi ed esploriamo come funziona questa funzionalità nella vita reale. Se desideri saperne di più su altri tipi di casi d'uso, puoi iniziare con questo esempio del W3C usando una galleria fotografica come suo caso dimostrativo, e anche qui. C'è anche un aggiornamento interessante dalla specifica CR di Modules August 2017 che afferma alcuni comportamenti interessanti :bersaglio dovrebbe possedere.
Al momento della stesura di questo documento è meglio visualizzare le seguenti demo con Safari 11, poiché gli altri browser (benché noti il supporto) in realtà non hanno il pieno supporto con la nuova sintassi, nonostante i dati di caniuse e test personali.
L'esempio seguente mostra solo le proprietà minime richieste per avviare il comportamento Scroll Snap di CSS e non include alcun polyfill in quanto non sono stato in grado di trovare un polyfill funzionante con la sintassi più recente pubblicata. È inoltre opportuno notare che qualsiasi contenitore di scorrimento richiederà un'altra proprietà CSS familiare definita come straripamento.
La demo sopra sfrutta l'asse y come posizione di snap tuttavia, puoi farlo altrettanto facilmente sull'asse x. Se non hai Safari 11 sul tuo sistema, ecco una registrazione dello schermo che mostra la funzionalità demo live fornita sopra.
I pannelli scattano ordinatamente. Notare che mentre scorrono c'è un punto in cui lo slancio del rotolo prende il sopravvento e avanza alla casella successiva. Piuttosto scattante eh?
Ecco una seconda demo che mostra l'asse delle y per visualizzare le immagini in una moda da galleria.
Mentre l'utente scorre orizzontalmente, la quantità di moto raggiunge il punto morto del punto di scorrimento e la regione dell'area di snap indipendentemente dalle dimensioni dell'immagine.
Ora è il momento di rivedere e spiegare le proprietà reali per quanto riguarda la loro sintassi e i valori accettati.
La specifica Scroll Snap corrente contiene solo quattro proprietà e ognuna svolge un ruolo importante. Quelle quattro proprietà sono ...
Accentsconagua
scroll-snap-tiposcroll-snap-alignscroll-paddingscroll-marginDiamo un'occhiata più da vicino e spieghiamo cosa fa ognuno, dove è definito e quali tipi di valori sono accettati.
scroll-snap-tipoQuesta proprietà specifica se un contenitore di scorrimento è in realtà un "contenitore di snap scroll" o "snapport", con quale precisione scatta e quali sono gli assi utilizzati. Se non è specificato alcun valore di rigore, il prossimità il valore è passato come predefinito. Questa proprietà accetta anche un altro valore che aiuta a definire l'asse "snap". Questo ti permetterebbe di passare in due valori a tua scelta (ad es. scroll-snap-type: y obbligatorio). In questo caso, stiamo affermando il snap-tipo si verifica solo nell'asse y ed è obbligatorio.
Scroll Snap Axis: X, y, bloccare, in linea, o tutti e due
X: Il contenitore di scorrimento scatta per bloccare le posizioni solo nel suo asse orizzontale.y: Il contenitore di scorrimento scatta per bloccare le posizioni solo nel suo asse verticale.bloccare: Il contenitore di scorrimento scatta per bloccare le posizioni solo nel suo asse di blocco.in linea: Il contenitore di scorrimento scatta per bloccare le posizioni solo nel suo asse in linea.tutti e due: Il contenitore di scorrimento esegue lo snap per bloccare le posizioni in entrambi i suoi assi in modo indipendente (potenzialmente agganciando a elementi diversi in ciascun asse).Scroll Snap Strictness: nessuna, prossimità, e obbligatorio
nessuna: Se specificato su un contenitore di scorrimento, il contenitore di scorrimento non deve scattare.prossimità: Se specificato su un contenitore di scorrimento, è necessario che il contenitore di scorrimento venga spezzato in una posizione di snap quando non vi sono operazioni di scorrimento attive. Se esiste una posizione di snap raggiungibile, il contenitore di scorrimento deve eseguire lo snap al termine di una scroll (se non esiste nessuno, non si verifica alcuno snap).obbligatorio: Se specificato su un contenitore di scorrimento, il contenitore di scorrimento potrebbe scattare in una posizione di snap al termine di una pergamena.scroll-snap-alignLa proprietà scroll-snap-align specifica la posizione di snap di un contenitore di scorrimento come un allineamento della sua area di snap (come il soggetto di allineamento) all'interno dello snapport del contenitore di snap (come contenitore di allineamento). I due valori specificano l'allineamento dello snap nell'asse in linea e l'asse del blocco, rispettivamente. Se viene specificato un solo valore, il secondo valore assume automaticamente lo stesso valore. I valori accettati sono nessuna, centro, inizio e fine.
In breve, questa proprietà è definita per i figli successivi del contenitore di scorrimento e accetta due valori. Il primo valore rappresenta l'asse x mentre i secondi rappresentano l'asse y; per esempio… scroll-snap-align: start center.
nessuna: Questa casella non definisce una posizione di snap nell'asse specificato.inizio: Inizia l'allineamento dell'area di snap di scorrimento di questa scatola all'interno dello snapport del contenitore di scorrimento è una posizione di snap nell'asse specificato.fine: L'allineamento finale dell'area di snap di scorrimento di questa casella all'interno dello snapport del contenitore di scorrimento è una posizione di snap nell'asse specificato.centro: L'allineamento centrale dell'area di snap di scorrimento di questa casella all'interno dello snapport del contenitore di scorrimento è una posizione di snap nell'asse specificato.scroll-paddingI valori di riempimento dello scorrimento agiscono come offset, quando dichiarati, per un contenitore di scorrimento e riducono l'area scorrevole considerata "visualizzabile". Ciò non ha alcun effetto sul layout, sull'origine scorrimento, sulla posizione iniziale e se un elemento è considerato effettivamente visibile. Ci sono due forme, molto simili alla proprietà padding standard in CSS, tuttavia esiste anche una versione longhand come scroll-padding-top, e scroll-padding-bottom, per esempio.
scroll-marginQuesti valori rappresentano outsets quando vengono dichiarati per un contenitore di scorrimento che definisce l'area di snap scroll utilizzata per l'aggancio di elementi allo snapport. Funziona e agisce come il margine proprietà tra cui le variazioni di stenografia e longhand come scroll-margin-top, e scroll-margin-bottom.
A causa dei recenti aggiornamenti pubblicati nella bozza del redattore corrente, troverete una mancanza di supporto a tutti i livelli e nessun polifi- chio di polifi- cienza come ho menzionato. C'è anche una possibilità che la proprietà scroll-scatto-stop è a rischio e potrebbe cadere durante il periodo di CR. Ho anche scoperto durante la mia ricerca e sperimentazione che min-height non funziona quando è definito nel contenitore di scorrimento dello scroll in questo momento. Potrebbero esserci altre proprietà che hanno gli stessi risultati, e se li trovi per favore lasciali nei commenti qui sotto.
Quindi, questo è lo scorrimento CSS che scorre da una grande panoramica. Ne vale la pena? Lo troveresti utile? O dovrebbe essere collocato negli angoli bui dell'universo, mai più ritrovato? Lascia i tuoi commenti qui sotto e, come sempre, felice codifica!
