A partire da Chrome 81, non devi più aggiungere listener di eventi per forzare di nuovo.
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.
Limiti
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.
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.
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.