Aggancio scorrimento dopo modifiche al layout

A partire da Chrome 81, non devi più aggiungere listener di eventi per forzare di nuovo.

Adam Argyle
Kaan Alsan
Kaan Alsan
Yi Gu

Snaps di scorrimento CSS consente agli sviluppatori web di creare esperienze di scorrimento ben controllate dichiarando posizioni di aggancio dello scorrimento. Un difetto dell'attuale implementazione è che L'aggancio allo scorrimento non funziona bene quando il layout cambia, ad esempio quando l'area visibile viene ridimensionato o ruotato il dispositivo. Questo problema è stato risolto nella versione 81 di Chrome.

Interoperabilità

Molti browser dispongono del supporto di base per Snaps di scorrimento CSS. Consulta la sezione Posso utilizzare i CSS Scorri Snap? per ulteriori informazioni.

Al momento Chrome è l'unico browser a implementare l'allineamento dello scorrimento dopo il layout modifiche. Firefox ha un ticket aperto per implementare questa funzionalità e Safari ha anche biglietto per gli agganci dopo un i contenuti dello scorrimento cambiano. Per il momento, puoi simulare questo comportamento aggiungendo il codice seguente ai listener di eventi per forzare l'esecuzione di uno snapshot: javascript scroller.scrollBy(0,0); Tuttavia, ciò non garantisce che lo scorrimento ritorni allo stesso .

Sfondo

Snaps di scorrimento CSS

La funzionalità di scorrimento di CSS consente agli sviluppatori web di creare impostazioni esperienze di scorrimento dichiarando le posizioni di aggancio allo scorrimento. Queste posizioni assicurarti che i contenuti scorrevoli siano allineati correttamente con il relativo contenitore a risolvere i problemi dello scorrimento impreciso. In altre parole, aggancio di scorrimento:

  • Impedisce posizioni di scorrimento complicate durante lo scorrimento.
  • Crea l'effetto di impaginare i contenuti.

Gli articoli impaginati e i caroselli di immagini sono due casi d'uso comuni per lo scorrimento scatta.

Esempio di aggancio di scorrimento CSS.
Esempio di aggancio di scorrimento CSS. Alla fine lo scorrimento del centro orizzontale di un'immagine è allineato al centro orizzontale del contenitore di scorrimento.

Limiti

Le posizioni di aggancio vanno perse quando si ridimensiona una finestra.

L'aggancio dello scorrimento consente agli utenti di navigare facilmente tra i contenuti, ma l'incapacità di adattarsi ai cambiamenti nei contenuti e nel layout blocca una parte del suo potenziale vantaggi dell'IA. Come mostrato nell'esempio qui sopra, gli utenti devono regolare di nuovo le posizioni di scorrimento ogni volta che ridimensionano una finestra per per trovare l'elemento agganciato in precedenza. Alcuni scenari comuni che causano modifiche sono:

  • Ridimensionamento di una finestra
  • Rotazione di un dispositivo
  • Apertura di DevTools

I primi due scenari rendono Snap di scorrimento CSS meno interessante per gli utenti e la terza è un incubo per gli sviluppatori durante il debug. Gli sviluppatori devono inoltre tieni conto di questi limiti al momento di creare un'esperienza dinamica che supporta azioni come l'aggiunta, la rimozione o lo spostamento di contenuti.

Una soluzione comune a questo problema è l'aggiunta di listener che eseguono uno scorrimento programmatico tramite JavaScript per forzare l'esecuzione dell'aggancio ogni volta che uno dei layout menzionati è menzionato se vengono apportate modifiche. Questa soluzione alternativa può essere inefficace se l'utente si aspetta scorrimento per tornare agli stessi contenuti di prima. Qualsiasi ulteriore gestione con JavaScript sembra quasi annullare lo scopo di questa funzionalità CSS.

Supporto integrato per il nuovo blocco dopo modifiche al layout in Chrome 81

I problemi menzionati non esistono più in Chrome 81: gli strumenti di scorrimento rimarranno agganciato anche dopo la modifica del layout. Valuterà di nuovo le posizioni di scorrimento dopo modificando il layout e, se necessario, esegui di nuovo l'aggancio alla posizione più vicina. Se la barra di scorrimento è stata precedentemente agganciata a un elemento che esiste ancora dopo layout, lo scorrimento proverà a riprendersi. Fai attenzione a cosa succede quando il layout cambia esempio.

Posizione di posizionamento persa
La rotazione di un dispositivo non consente di conservare le posizioni di agganciamento in Chrome 80. Dopo aver fatto scorrere la slide fino alla slide NOPE e aver modificato l'orientamento del dispositivo da verticale a orizzontale, viene mostrata una schermata vuota, a indicare che posizione di posizionamento dello scorrimento persa.
Posizione dello snapshot mantenuta
La rotazione di un dispositivo comporta la conservazione delle posizioni di aggancio in Chrome 81. La slide che dice che NOPE rimane nella visualizzazione anche se l'orientamento del dispositivo cambia più volte.

Consulta la sezione Agganciare di nuovo dopo le modifiche al layout specifiche per ulteriori informazioni i dettagli.

Esempio: barre di scorrimento fisse

Grazie all'opzione "Aggancia dopo le modifiche al layout", gli sviluppatori possono implementare barre di scorrimento fisse con linee CSS:

.container {
  scroll-snap-type: y proximity;
}

.container::after {
  scroll-snap-align: end;
  display: block;
}

Vuoi saperne di più? Consulta la seguente chat demo UI per le immagini.

L'aggiunta di un nuovo messaggio attiva lo scatto di nuovo in fondo Chrome 81.

Lavoro futuro

Tutti gli effetti di scorrimento che riagganciano al momento sono attualmente istantanei; che un potenziale follow-up sia per consentire il re-aggancio con scorrimento fluido effetti sonori. Consulta il problema relativo alle specifiche. per maggiori dettagli.

Feedback

Il tuo feedback è indispensabile per migliorare l'acquisizione di elementi dopo le modifiche al layout, quindi continua. e la proviamo, chiedi agli ingegneri di Chromium sai cosa pensare.