A partire dalla versione 81 di Chrome, non è più necessario aggiungere listener di eventi per forzare il ripristino.
CSS Slide Snap consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di agganciamento dello scorrimento. Un difetto dell'implementazione attuale è che l'agganciamento dello scorrimento non funziona bene quando il layout cambia, ad esempio quando l'area visibile viene ridimensionata o il dispositivo viene ruotato. Questo problema è stato risolto in Chrome 81.
Interoperabilità
Molti browser offrono un supporto di base per CSS Scorri Snap. Per ulteriori informazioni, consulta Posso utilizzare CSS Scorri Snap?.
Attualmente Chrome è l'unico browser a implementare l'agganciamento dello scorrimento dopo le modifiche al layout. Firefox ha un ticket aperto per implementare questa funzionalità e Safari ha anche un ticket aperto per riagganciare dopo la modifica dei contenuti di uno scroller. Per ora puoi simulare questo comportamento aggiungendo il codice seguente ai listener di eventi per forzare l'esecuzione dell'agganciamento:
javascript
scroller.scrollBy(0,0);
Tuttavia, ciò non garantisce che lo scorrimento riporti allo stesso elemento.
Contesto
Scorrimento CSS
La funzionalità Snap di scorrimento di CSS consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di agganciamento dello scorrimento. Queste posizioni assicurano che i contenuti scorrevoli siano correttamente allineati con il relativo container per risolvere i problemi di scorrimento impreciso. In altre parole, agganciare lo scorrimento:
- Questa opzione consente di evitare posizioni di scorrimento imbarazzanti durante lo scorrimento.
- Crea l'effetto del paging tra i contenuti.
Articoli impaginati e caroselli di immagini sono due casi d'uso comuni per gli scatti di scorrimento.
Carenze
L'agganciamento dello scorrimento consente agli utenti di navigare facilmente tra i contenuti, ma la sua incapacità di adattarsi alle modifiche nei contenuti e nel layout blocca alcuni dei suoi potenziali vantaggi. Come mostrato nell'esempio riportato sopra, per trovare l'elemento agganciato in precedenza, gli utenti devono regolare nuovamente le posizioni di scorrimento ogni volta che ridimensionano una finestra. Ecco alcuni scenari comuni che causano una modifica del layout:
- Ridimensionamento di una finestra
- Ruotare un dispositivo
- Apertura di DevTools
I primi due scenari rendono CSS Scorri Snap meno interessante per gli utenti, mentre il terzo è un incubo per gli sviluppatori durante il debug. Gli sviluppatori devono inoltre tenere conto di queste carenze quando cercano di creare un'esperienza dinamica che supporti azioni quali l'aggiunta, la rimozione o lo spostamento di contenuti.
Una soluzione comune per questo problema è l'aggiunta di listener che eseguono uno scorrimento programmatico tramite JavaScript per forzare l'esecuzione dell'agganciamento ogni volta che si verifica una di queste modifiche al layout menzionate. Questa soluzione alternativa può essere inefficace quando l'utente si aspetta che lo scorrimento riporti gli stessi contenuti di prima. Qualsiasi ulteriore gestione con JavaScript sembra quasi annullare lo scopo di questa funzionalità CSS.
Supporto integrato per il nuovo scatto dopo le modifiche al layout in Chrome 81
Le carenze menzionate non esistono più in Chrome 81: gli utenti di scorrimento rimangono bloccati anche dopo il cambiamento del layout. Dopo aver modificato il layout, rivalutano le posizioni di scorrimento e, se necessario, agganciano di nuovo alla posizione di scorrimento più vicina. Se la barra di scorrimento è stata precedentemente agganciata a un elemento ancora esistente dopo la modifica del layout, prova ad agganciarsi all'elemento. Fai attenzione a cosa succede quando il layout cambia nel seguente esempio.
NOPE e aver modificato l'orientamento del dispositivo da verticale a orizzontale, viene mostrata una schermata vuota a indicare che la posizione di agganciamento dello scorrimento è stata persa.
NOPE rimane visibile anche se l'orientamento del dispositivo cambia più volte.
Per ulteriori dettagli, consulta la specifica sull'agganciamento dopo le modifiche al layout.
Esempio: barre di scorrimento persistenti
Con "Istantanea dopo le modifiche al layout", gli sviluppatori possono implementare barre di scorrimento fisse con alcune righe di CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Vuoi saperne di più? Per le immagini, consulta la seguente UI della chat demo.
Lavori futuri
Al momento tutti gli effetti di scorrimento dell'agganciamento sono istantanei; un potenziale follow-up è per supportare l'agganciamento con effetti di scorrimento fluido. Per informazioni dettagliate, consulta il problema relativo alle specifiche.
Feedback
Il tuo feedback è inestimabile per migliorare la possibilità di ripetere l'agganciamento dopo le modifiche al layout, quindi continua a provarlo e fai sapere agli ingegneri di Chromium cosa ne pensi.