Scorrimento ben controllato con CSS Scroll Snap

Crea esperienze di scorrimento ben controllate dichiarando le posizioni di agganciamento dello scorrimento.

Robert Flack

Majid Valipour

La funzionalità Snap di scorrimento CSS consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di aggancio di scorrimento. Due esempi di articoli con pagine e caroselli di immagini sono di uso comune. CSS scroll Snap fornisce un'API coerente e facile da usare per creare questi pattern UX popolari.

Contesto

La custodia per l'agganciamento dello scorrimento

Lo scorrimento è un modo naturale e diffuso di interagire con i contenuti sul web. È il mezzo nativo della piattaforma per fornire l'accesso a più informazioni di quelle visibili sullo schermo contemporaneamente, diventando particolarmente vitale sulle piattaforme mobile con uno spazio sullo schermo limitato. Non sorprende quindi che gli autori del web preferiscano sempre più organizzare i contenuti in elenchi semplici scorrevoli invece che in gerarchie profonde.

Lo svantaggio principale dello scorrimento è la mancanza di precisione. Raramente un rotolo finisce allineato a un paragrafo o a una frase. Questo aspetto è ancora più pronunciato per i contenuti impaginati o dettagliati con confini significativi quando lo scorrimento termina al centro della pagina o dell'immagine, lasciandoli parzialmente visibili. Questi casi d'uso traggono vantaggio da un'esperienza di scorrimento ben controllata.

Gli sviluppatori web fanno affidamento a lungo su soluzioni basate su JavaScript per controllare lo scorrimento e risolvere questo problema. Tuttavia, le soluzioni basate su JavaScript non sono in grado di fornire una soluzione completa a causa della mancanza di primitive di personalizzazione dello scorrimento o dell'accesso allo scorrimento composito. CSS scroll Snap garantisce una soluzione rapida, ad alta fedeltà e facile da usare, che funziona in modo coerente su tutti i browser.

CSS Snap di scorrimento consente agli autori web di contrassegnare ogni contenitore di scorrimento con dei limiti per le operazioni di scorrimento in cui completare le operazioni. I browser scelgono quindi la posizione finale più appropriata in base ai dettagli dell'operazione di scorrimento, al layout e alla visibilità del container di scorrimento e ai dettagli delle posizioni di agganciamento, dopodiché l'animazione si anima in modo fluido. Tornando all'esempio precedente, quando l'utente finisce di scorrere il carosello, l'immagine visibile scatta in posizione. Non è necessario alcun aggiustamento dello scorrimento da parte di JavaScript.

Scorrimento CSS

L'agganciamento dello scorrimento è l'atto di regolare l'offset di scorrimento di un contenitore di scorrimento in modo che si trovi nella posizione di aggancio preferita al termine dell'operazione.

È possibile attivare l'agganciamento di scorrimento per un contenitore di scorrimento utilizzando la proprietà scroll-snap-type. Questo indica al browser che dovrebbe prendere in considerazione l'agganciamento di questo contenitore di scorrimento alle posizioni di agganciamento prodotte dai suoi discendenti. scroll-snap-type determina l'asse su cui avviene lo scorrimento: x, y o both e la severità di aggancio: mandatory, proximity. Approfondiremo questi aspetti più avanti.

La posizione di agganciamento può essere prodotta dichiarando l'allineamento desiderato su un elemento. Questa posizione è l'offset di scorrimento in base al quale il container di scorrimento dei predecessori più vicino e l'elemento sono allineati come specificato per l'asse specificato. I seguenti allineamenti sono possibili su ciascun asse: start, end, center.

Un allineamento start indica che il bordo iniziale dello snapshot del container di scorrimento deve essere flussato con il bordo iniziale dell'area di agganciamento dell'elemento. Analogamente, gli allineamenti end e center indicano che il bordo o il centro dell'estremità di Snapport del contenitore di scorrimento deve essere allineato con il bordo o il centro dell'area di agganciamento dell'elemento.

I seguenti esempi illustrano come utilizzare questi concetti.

Esempio: una galleria orizzontale

Un caso d'uso comune per l'agganciamento dello scorrimento è un carosello di immagini. Ad esempio, per creare un carosello di immagini orizzontale che si aggancia a ogni immagine mentre scorri, possiamo specificare il contenitore di scorrimento in modo che abbia un scroll-snap-type obbligatorio sull'asse orizzontale. Imposta ogni immagine su scroll-snap-align: center per garantire che l'agganciamento sia centrato all'interno del carosello.

#gallery {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

#gallery img {
   scroll-snap-align: center;
}

<div id="gallery">
  <img src="cat.jpg">
  <img src="dog.jpg">
  <img src="another_cute_animal.jpg">
</div>

Poiché le posizioni di agganciamento sono associate a un elemento, l'algoritmo di agganciamento può risultare intelligente riguardo a quando e come scatta in base alle dimensioni dell'elemento e del contenitore di scorrimento. Ad esempio, considera il caso in cui un'immagine è più grande del carosello. Un algoritmo di agganciamento ingenuo potrebbe impedire all'utente di eseguire la panoramica per visualizzare l'immagine intera. Tuttavia, la specifica richiede che le implementazioni rilevino questo caso e consentano all'utente di scorrere liberamente l'immagine agganciando solo ai bordi.

Esempio: una pagina di prodotto con percorso

Un altro caso comune che può trarre vantaggio dall'agganciamento dello scorrimento sono le pagine con più sezioni logiche da scorrere verticalmente, ad esempio una tipica pagina di prodotto. scroll-snap-type: y proximity; è più naturale per casi come questo. Non interferisce quando un utente scorre fino al centro di una determinata sezione, ma scatta anche a una nuova sezione quando scorre abbastanza vicino.

Ecco come fare:

article {
  scroll-snap-type: y proximity;
  /* Reserve space for header plus some extra space for sneak peeking. */
  scroll-padding-top: 15vh;
  overflow-y: scroll;
}
section {
  /* Snap align start. */
  scroll-snap-align: start;
}
header {
  position: fixed;
  height: 10vh;
}

<article>
  <header> Header </header>
  <section> Section One </section>
  <section> Section Two </section>
  <section> Section Three </section>
</article>

Spaziatura interna e margine di scorrimento

La pagina del prodotto ha un'intestazione superiore con posizione fissa. Il design richiedeva anche che alcune parti della sezione superiore rimanessero visibili quando il contenitore di scorrimento fosse agganciato, in modo da fornire agli utenti un spunto di progettazione per i contenuti riportati sopra.

La proprietà scroll-padding è una nuova proprietà CSS che può essere utilizzata per regolare l'area visibile effettiva del contenitore di scorrimento, o Snapport, che viene utilizzata per il calcolo degli allineamenti di Scorrimento. La proprietà definisce un riquadro nella casella di spaziatura interna del container di scorrimento. Nel nostro esempio, è stato aggiunto 15vh riquadro aggiuntivo alla parte superiore, che indica al browser di considerare una posizione più bassa, 15vh sotto il bordo superiore del contenitore di scorrimento, come bordo iniziale verticale per l'agganciamento dello scorrimento. Durante l'agganciamento, il bordo iniziale dell'elemento target di agganciamento diventerà allineato con la nuova posizione, lasciando così spazio sopra.

La proprietà scroll-margin definisce la quantità iniziale utilizzata per regolare la casella effettiva del target dello snapshot in modo simile al modo in cui scroll-padding funziona nel contenitore di Snap scroll.

Potresti aver notato che queste due proprietà non contengono la parola "snap". Questa operazione è intenzionale, dal momento che in realtà modificano la casella per tutte le operazioni di scorrimento pertinenti e non sono solo l'agganciamento di scorrimento. Ad esempio, Chrome le tiene conto per il calcolo delle dimensioni della pagina per le operazioni di scorrimento della pagina, come PagGiù e PagSu, e anche per calcolare la quantità di scorrimento per l'operazione Element.scrollIntoView().

Interazione con altre API di scorrimento

API DOM scrolling

L'agganciamento dello scorrimento avviene dopo tutte le operazioni di scorrimento, incluse quelle avviate dallo script. Se utilizzi API come Element.scrollTo, il browser calcolerà la posizione di scorrimento prevista dell'operazione, quindi applicherà la logica di agganciamento appropriata per trovare la posizione di agganciata finale. Pertanto, lo script utente non deve fare calcoli manuali per l'agganciamento.

Scorrimento fluido

Lo scorrimento fluido controlla il comportamento di un'operazione di scorrimento programmatico, mentre l'allineamento di scorrimento determina la destinazione. Poiché controllano aspetti ortogonali dello scorrimento, possono essere utilizzati insieme e completarsi a vicenda.

Comportamento di scorrimento orizzontale

L'API overscroll controlla in che modo lo scorrimento viene concatenato tra più elementi e non viene influenzato dallo scatto di scorrimento.

Avvertenze e best practice

Evita di utilizzare l'agganciamento obbligatorio quando gli elementi target sono molto distanziati. Di conseguenza, i contenuti che si trovano tra le posizioni di agganciamento potrebbero diventare inaccessibili.

In molti casi l'agganciamento tramite scorrimento può essere aggiunto come miglioramento senza dover rilevare le caratteristiche. Se necessario, utilizza @supports o CSS.supports per rilevare il supporto di Snap di scorrimento CSS. Evita di utilizzare scroll-snap-type, che è presente anche nella specifica ritirata.

Rilevamento delle funzionalità in CSS

@supports (scroll-snap-align: start) {
  article {
    scroll-snap-type: y proximity;
    scroll-padding-top: 15vh;
    overflow-y: scroll;
  }
}

Rilevamento delle funzionalità in JavaScript

if (CSS.supports('scroll-snap-align: start')) {
  // use css scroll snap
} else {
  // use fallback
}

Non dare per scontato che le API a scorrimento programmatico come Element.scrollTo concludano sempre l'offset di scorrimento richiesto. L'agganciamento di scorrimento può regolare l'offset di scorrimento al termine dello scorrimento programmatico. Tieni presente che questo non era una buona ipotesi anche prima dell'agganciamento di scorrimento poiché lo scorrimento potrebbe essere stato interrotto per altri motivi, ma in particolare nel caso dell'agganciamento di scorrimento.

Lavori futuri

L'esperienza di scorrimento è stata al centro di un recente sondaggio del team di Chrome. I risultati del sondaggio hanno identificato diverse aree che richiedono interventi aggiuntivi per ridurre il divario tra le librerie di plug-in e CSS. I prossimi lavori si concentreranno su scroll-snap, tra cui:

1. Disponibilità e compatibilità dell'API nei vari browser.
2. Lavora a nuove API CSS come scroll-start.
3. Lavora su nuovi eventi JS come snapChanged().