Scorrimento ben controllato con CSS Scroll Snap

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

Robert Flack

Majid Valipour

La funzionalità Snapshot di CSS consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di aggancio allo scorrimento. Gli articoli paginati e i caroselli di immagini sono due esempi di questo tipo di contenuti molto utilizzati. CSS Scorri Snap fornisce un'API coerente e facile da usare per creare questi pattern UX popolari.

Sfondo

Il caso dell'aggancio allo scorrimento

Lo scorrimento è un modo popolare e naturale per interagire con i contenuti sul web. È lo strumento nativo della piattaforma che consente di fornire l'accesso a più informazioni rispetto a quelle visibili contemporaneamente sullo schermo, diventando di fondamentale importanza sulle piattaforme mobile con spazio limitato sullo schermo. Non sorprende quindi che gli autori web preferiscano sempre di più organizzare i contenuti in liste piatti scorrevoli anziché in gerarchie profonde.

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

Gli sviluppatori web si affidano a lungo a soluzioni basate su JavaScript per controllare lo scorrimento e risolvere così questo problema. Tuttavia, le soluzioni basate su JavaScript non riescono a fornire una soluzione con una fedeltà completa a causa della mancanza di primitive di personalizzazione dello scorrimento o dell'accesso allo scorrimento composito. CSS di scorrimento Snap assicura una soluzione veloce, ad alta fedeltà e facile da usare che funziona in modo coerente tra i browser.

La funzionalità di scorrimento CSS consente agli autori web di contrassegnare ogni contenitore di scorrimento con margini per le operazioni di scorrimento in cui terminare. I browser scelgono quindi la posizione finale più appropriata in base ai dettagli dell'operazione di scorrimento, al layout e alla visibilità del contenitore di scorrimento e ai dettagli delle posizioni di aggancio, quindi la animano in modo fluido. Tornando all'esempio precedente, quando l'utente termina di scorrere il carosello, l'immagine visibile si inserisce in posizione. Non sono necessarie modifiche allo scorrimento da parte di JavaScript.

Snap scorrimento CSS

Lo snap di scorrimento consiste nell'aggiustare l'offset di scorrimento di un contenitore di scorrimento in modo che al termine dell'operazione di scorrimento si trovi in una posizione di snap preferita.

È possibile attivare l'aggancio allo scorrimento di un contenitore di scorrimento utilizzando la proprietà scroll-snap-type. Questo indica al browser che dovrebbe prendere in considerazione di agganciare questo container di scorrimento alle posizioni di agganciamento generate dai suoi discendenti. scroll-snap-type determina l'asse su cui viene eseguito lo scorrimento: x, y o both, e la severità di aggancio: mandatory, proximity. Ne riparleremo più avanti.

È possibile creare una posizione di agganciamento dichiarando l'allineamento desiderato su un elemento. Questa posizione è l'offset di scorrimento in cui il contenitore di scorrimento del predecessore più vicino e l'elemento sono allineati come specificato per l'asse specificato. Su ogni asse sono possibili i seguenti allineamenti: start, end, center.

Un allineamento start indica che il bordo di inizio dell'area di aggancio del contenitore di scorrimento deve essere allineato al bordo di inizio dell'area di aggancio dell'elemento. Allo stesso modo, gli allineamenti end e center indicano che il bordo o il centro finale dell'aggancio del contenitore di scorrimento deve essere allineato al bordo finale o al centro dell'area di aggancio dell'elemento.

I seguenti esempi illustrano come utilizzare questi concetti.

Esempio: una galleria orizzontale

Un caso d'uso comune per l'aggancio dello scorrimento è il carosello di immagini. Ad esempio, per creare un carosello di immagini orizzontale che si aggancia a ogni immagine durante lo scorrimento, possiamo specificare che il contenitore di scorrimento abbia un scroll-snap-type obbligatorio sull'asse orizzontale. Imposta ogni immagine su scroll-snap-align: center per assicurarti che l'aggancio centri l'immagine 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 agganci sono associate a un elemento, l'algoritmo di aggancio può essere intelligente su quando e come applicare l'aggancio in base all'elemento e alle dimensioni del contenitore scorrevole. Ad esempio, prendi in considerazione il caso in cui un'immagine sia più grande del carousel. Un algoritmo di agganci semplici potrebbe impedire all'utente di eseguire la panoramica per vedere l'immagine completa. Tuttavia, la specifica richiede alle implementazioni di rilevare questo caso e consentire all'utente di scorrere liberamente all'interno dell'immagine solo scattando ai bordi.

Esempio: una pagina di prodotto con percorso

Un altro caso comune che può trarre vantaggio dall'aggancio di scorrimento sono le pagine con più sezioni logiche da scorrere verticalmente, ad esempio una tipica pagina di prodotto. scroll-snap-type: y proximity; è una soluzione più adatta per casi come questo. Non interferisce quando l'utente scorre fino al centro di una particolare sezione, ma lo scatta e richiama l'attenzione su una nuova sezione quando l'utente scorre abbastanza vicino.

Ecco come:

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 di scorrimento e margine

La pagina del prodotto ha un'intestazione superiore in posizione fissa. Il design prevedeva inoltre che parte della sezione superiore rimanesse visibile quando il contenitore di scorrimento viene agganciato per fornire agli utenti un indizio di design sui contenuti soprastanti.

La proprietà scroll-padding è una nuova proprietà CSS che può essere utilizzata per regolare la regione visibile effettiva del contenitore di scorrimento o snapport, che viene utilizzata per calcolare gli allineamenti di snap dello scorrimento. La proprietà definisce un inset nei confronti della casella di spaziatura del contenitore di scorrimento. Nel nostro esempio, è stato aggiunto 15vh ulteriore riquadro in alto, 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'aggancio dello scorrimento. Durante l'agganciamento, il bordo iniziale dell'elemento target di agganciamento verrà allineato con questa nuova posizione, lasciando spazio sopra.

La proprietà scroll-margin definisce l'importo dell'esclusione utilizzato per regolare la casella effettiva del target di aggancio in modo simile al funzionamento di scroll-padding nel contenitore di scorrimento di aggancio.

Potresti aver notato che queste due proprietà non contengono la parola "snap". Questa operazione è intenzionale perché modificano effettivamente il riquadro per tutte le operazioni di scorrimento pertinenti e non sono solo aggancio di scorrimento. Ad esempio, Chrome ne tiene conto durante il calcolo delle dimensioni della pagina per le operazioni di scorrimento delle pagine, come Pagina giù e Pagina su, nonché per calcolare la quantità di scorrimento per l'operazione Element.scrollIntoView().

Interazione con altre API di scorrimento

API Scorrimento DOM

L'aggancio allo scorrimento avviene dopo tutte le operazioni di scorrimento, incluse quelle avviate tramite script. Quando utilizzi API come Element.scrollTo, il browser calcola la posizione di scorrimento prevista dell'operazione, quindi applica la logica di agganci appropriata per trovare la posizione finale agganciata. Pertanto, non è necessario che lo script utente esegua calcoli manuali per l'aggancio.

Scorrimento fluido

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

Comportamento overscroll

L'API di comportamento di scorrimento eccessivo controlla in che modo scorrimento viene collegato a più elementi e non è interessato dallo snap scorrimento.

Limitazioni e best practice

Evita di utilizzare l'aggancio obbligatorio quando gli elementi target sono molto distanziati. Di conseguenza, i contenuti compresi tra le posizioni di agganciamento potrebbero non essere più accessibili.

In molti casi, la funzionalità di scorrimento automatico può essere aggiunta come miglioramento senza dover eseguire il rilevamento delle funzionalità. Se necessario, utilizza @supports o CSS.supports per rilevare il supporto di CSS di scorrimento Snap. Evita di utilizzare scroll-snap-type, che è presente anche nella specifica deprecata.

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 di scorrimento programmato come Element.scrollTo terminino sempre con l'offset di scorrimento richiesto. L'aggancio di scorrimento potrebbe regolare l'offset di scorrimento al termine dello scorrimento programmatico. Tieni presente che ciò non era una buona ipotesi anche prima dell'aggancio di scorrimento, dato che lo scorrimento potrebbe essere stato interrotto per altri motivi, ma è in particolare nel caso dell'aggancio dello scorrimento.

Lavoro futuro

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 ulteriore lavoro per colmare il divario tra le librerie dei plug-in e il CSS. I lavori in programma si concentreranno su scroll-snap, tra cui:

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