A partire da Chrome 81, non è più necessario aggiungere listener di eventi per forzare il riassorbimento.
CSS Scroll Snap consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di aggancio dello scorrimento. Uno svantaggio dell'attuale implementazione è che la funzionalità di aggancio allo scorrimento non funziona bene quando il layout cambia, ad esempio quando le dimensioni dell'area visibile vengono modificate o il dispositivo viene ruotato. Questo problema è stato risolto nella versione 81 di Chrome.
Interoperabilità
Molti browser offrono il supporto di base per la funzionalità CSS Scroll Snap. Per ulteriori informazioni, consulta Posso utilizzare la funzionalità di scorrimento snap CSS?
Al momento Chrome è l'unico browser a implementare l'aggancio dello scorrimento dopo le modifiche al layout. Per Firefox è stato aperto un
ticket per implementare questa funzionalità e anche per Safari è stato aperto un
ticket per il ricoinvolgimento dopo la modifica dei contenuti di un
barra scorrevole. Per il momento, puoi simulare questo comportamento aggiungendo il seguente codice agli ascoltatori di eventi per forzare l'esecuzione di uno snap:
javascript
scroller.scrollBy(0,0);
Tuttavia, ciò non garantisce che lo scorrimento torni allo stesso elemento.
Sfondo
Snap scorrimento CSS
La funzionalità di snap scorrimento CSS consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando le posizioni di snap scorrimento. Queste posizioni assicurano che i contenuti scorrevoli siano allineati correttamente con il relativo contenitore per risolvere i problemi di scorrimento impreciso. In altre parole, l'allineamento dello scorrimento:
- Impedisce posizioni di scorrimento sconvenienti durante lo scorrimento.
- Crea l'effetto di scorrere i contenuti.
Gli articoli impaginati e i caroselli di immagini sono due casi d'uso comuni per gli snapshot di scorrimento.
Limiti
La funzionalità di scorrimento automatico consente agli utenti di navigare facilmente tra i contenuti, ma la sua incapacità di adattarsi alle modifiche dei contenuti e del layout ne blocca alcuni potenziali vantaggi. Come mostrato nell'esempio sopra, gli utenti devono regolare nuovamente le posizioni di scorrimento ogni volta che ridimensionano una finestra per trovare l'elemento agganciato in precedenza. Ecco alcuni scenari comuni che causano la modifica del layout:
- Ridimensionare una finestra
- Ruotare un dispositivo
- Apertura di DevTools
I primi due scenari rendono CSS Scroll Snap meno interessante per gli utenti, mentre il terzo è un incubo per gli sviluppatori durante il debug. Gli sviluppatori devono anche considerare questi limiti quando cercano di creare un'esperienza dinamica che supporti azioni come l'aggiunta, la rimozione o lo spostamento dei contenuti.
Una soluzione comune consiste nell'aggiungere listener che eseguono uno scorrimento programmatico tramite JavaScript per forzare l'esecuzione dell'aggancio ogni volta che si verifica una delle modifiche al layout menzionate. Questa soluzione alternativa può essere inefficace quando l'utente si aspetta che lo scorrimento torni agli stessi contenuti di prima. Qualsiasi ulteriore trattamento con JavaScript sembra quasi svuotare lo scopo di questa funzionalità CSS.
Supporto integrato per il nuovo agganciamento dopo le modifiche al layout in Chrome 81
I problemi menzionati non esistono più in Chrome 81: i cursori rimarranno bloccati anche dopo aver modificato il layout. Le posizioni di scorrimento verranno rivalutate dopo aver modificato il layout e, se necessario, verranno applicate nuovamente alla posizione di aggancio più vicina. Se la barra di scorrimento era precedentemente agganciata a un elemento che esiste ancora dopo la modifica del layout, la barra di scorrimento tenterà di agganciarsi di nuovo a quell'elemento. Presta attenzione a cosa succede quando il layout cambia nel seguente esempio.
NOPE e aver modificato l'orientamento del dispositivo da verticale a orizzontale, viene visualizzata una schermata vuota, che indica che la posizione di scatto dello scorrimento è andata persa.
NOPE rimane visibile anche se l'orientamento del dispositivo cambia più volte.
Per ulteriori dettagli, consulta la specifica relativa al ricoinvolgimento dopo le modifiche al layout.
Esempio: barre di scorrimento fisse
Grazie all'opzione "Aggancia dopo le modifiche al layout", gli sviluppatori possono implementare barre di scorrimento fisse con alcune righe di codice CSS:
.container {
scroll-snap-type: y proximity;
}
.container::after {
scroll-snap-align: end;
display: block;
}
Vuoi saperne di più? Per visualizzare le immagini, consulta la seguente UI chat demo.
Lavoro futuro
Tutti gli effetti di scorrimento che si riagganciano al momento sono istantanei; un potenziale follow-up è supportare il re-agganciamento con effetti di scorrimento fluido. Per informazioni dettagliate, consulta il problema di specifica.
Feedback
Il tuo feedback è fondamentale per migliorare il ricoinvolgimento dopo le modifiche al layout, quindi provalo e comunica ai tecnici di Chromium la tua opinione.