Grazie per aver seguito Google I/O. Guarda i contenuti on demand.

Questa pagina è stata tradotta dall'API Cloud Translation.

Eventi Snap di scorrimento

Adam Argyle

A partire da Chrome 129, puoi utilizzare gli eventi scrollSnapChange e scrollSnapChanging da JavaScript. Se implementi gli eventi snap integrati, lo stato dello snap precedentemente invisibile diventerà utilizzabile, al momento giusto e sempre corretto. Questa non è una funzionalità che avevi a disposizione senza questi eventi.

Supporto dei browser

Origine

Supporto dei browser

Origine

Prima di scrollSnapChange, potevi utilizzare un osservatore di intersezione per trovare l'elemento che attraversava la porta di scorrimento, ma la determinazione di ciò che veniva agganciato era limitata ad alcune circostanze. Ad esempio, puoi rilevare se gli elementi di snap riempiono la porta di scorrimento o la maggior parte della porta di scorrimento. Per farlo, devi osservare gli elementi che si intersecano nell'area di scorrimento, quindi, in base a quale elemento occupa la maggior parte dell'area di scorrimento, supporre che si tratti del target di aggancio, quindi attendere scrollend e intervenire sull'elemento agganciato (il target di aggancio).

Tuttavia, prima del giorno scrollSnapChanging, era impossibile sapere quando cambia il target di aggancio o a cosa viene modificato (ad esempio in seguito a uno scorrimento rapido).

Viene visualizzato un dispositivo di scorrimento orizzontale con caselle numerate all'interno come target di aggancio. A sinistra è riportato un log in tempo reale degli eventi scrollSnapChange, che evidenziano snapTargetInline in blu. A destra è riportato un log in tempo reale degli eventi scrollSnapChanging, che evidenzia snapTargetInline in grigio.

Provalo
https://codepen.io/web-dot-dev/pen/jOjaaEP

Buone notizie: questi nuovi eventi rendono queste informazioni disponibili in modo semplice e rapido. In questo modo, le interazioni con gli snap di scorrimento possono andare oltre le loro attuali funzionalità e consentono l'orchestrazione delle relazioni tra gli snap di scorrimento e nuovi scenari di feedback dell'interfaccia utente.

scrollSnapChange

Questo evento viene attivato solo se un gesto di scorrimento ha portato a un nuovo target di snap e nell'ordine seguente

Dopo che lo scorrimento è terminato.
Prima del giorno scrollend.

Questo evento viene attivato appena prima di scrollend, al termine dello scorrimento e solo se è stato raggiunto un nuovo target di aggancio. In questo modo, l'evento sembra lazy o just-in-time al termine del gesto di scorrimento.

scroller.addEventListener('scrollsnapchange', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchange = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

L'evento espone l'elemento agganciato nell'oggetto evento come snapTargetBlock e snapTargetInline. Se lo scorrevole è solo orizzontale, la proprietà snapTargetBlock sarà null. Il valore della proprietà sarà il nodo elemento.

Dettagli unici per scrollSnapChange

Non viene attivato finché l'utente non rilascia il gesto

Un dito ancora sullo schermo o dita su un trackpad indicano che lo scorrimento del gesto dell'utente non è terminato, il che significa che lo scorrimento non è terminato, il che significa che il target di aggancio non è ancora cambiato, è in attesa di un gesto completo dell'utente.

Non viene attivato se il target di snap non è cambiato

L'evento riguarda la modifica dell'aggancio e, se il target di aggancio non è cambiato, l'evento non viene attivato, anche se un utente ha interagito con lo scorrevole. Tuttavia, l'utente ha effettivamente eseguito lo scorrimento, quindi al termine dello scorrimento viene comunque attivato l'evento scrollend.

scrollSnapChanging

Questo evento viene attivato non appena il browser ha deciso che il gesto di scorrimento ha o avrà come risultato un nuovo target di snap. Viene attivato immediatamente e durante lo scorrimento.

scroller.addEventListener('scrollsnapchanging', event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
})

scroller.onscrollsnapchanging = event => {
  console.log(event.snapTargetBlock);
  console.log(event.snapTargetInline);
}

L'evento espone l'elemento agganciato nell'oggetto evento come snapTargetBlock e snapTargetInline. Se lo scorrevole è solo verticale, la proprietà snapTargetInline sarà null. Il valore della proprietà sarà il nodo elemento.

Dettagli unici per scrollSnapChanging

Viene attivato presto e spesso durante un gesto di scorrimento

A differenza di scrollSnapChange, che attende un gesto di scorrimento completo da parte dell'utente, questo evento viene attivato immediatamente mentre l'utente scorre con il dito o utilizzando un trackpad. Supponiamo che un utente stia scorrendo lentamente senza sollevare un dito. L'evento scrollSnapChanging viene attivato più volte durante il gesto, a condizione che l'utente esegua la panoramica su più potenziali target di snap. Ogni volta che l'utente scorre, se il browser ha stabilito che al rilascio si fermerà su un nuovo target di aggancio, viene attivato l'evento per indicare quale elemento si tratta.

Non attiva tutti i target di snap lungo il percorso fino a un nuovo target di snap

Inoltre, considera un movimento brusco in cui un utente esegue un gesto di scorrimento che copre più target di snap contemporaneamente; questo evento verrà attivato una volta con il target su cui verrà posizionato il cursore. È quindi un'operazione rapida, ma non spreca risorse, perché ti fornisce il target di acquisizione il prima possibile.

Casi d'uso ed esempi

Questi eventi consentono molti nuovi casi d'uso e semplificano l'implementazione dei pattern attuali. Un ottimo esempio è l'attivazione dell'animazione attivata da scatto. Mostrare in modo contestuale l'elemento di snap, gli elementi secondari dell'elemento di snap o le informazioni associate quando è il target dello snap.

I seguenti pattern mostrano alcuni casi d'uso per aiutarti a iniziare subito a essere produttivo.

Mettere in evidenza una testimonianza

Questo esempio promuove o mette in evidenza visivamente la testimonianza scattata.

scroller.onscrollsnapchange = event => {
  scroller.querySelector(':scope .snapped')?.classList.remove('snapped')
  event.snapTargetInline.classList.add('snapped')
}

https://codepen.io/web-dot-dev/pen/dyBZZPe

Mostra la didascalia dell'elemento agganciato

Questo esempio mostra la didascalia dell'elemento agganciato. Entrambi gli eventi sono inclusi in questa demo, quindi puoi vedere le differenze di tempo e di esperienza utente tra scrollSnapChange e scrollSnapChanging.

Snap in evoluzione
https://codepen.io/web-dot-dev/pen/wvLPPBL

Modifica Snap
https://codepen.io/web-dot-dev/pen/QWXOObw

Anima una sola volta gli elementi secondari di una diapositiva della presentazione agganciata

Questo esempio rileva quando viene visualizzata una nuova diapositiva e quando viene visualizzata per intero, il momento ideale per animare i contenuti una volta.

document.addEventListener('scrollsnapchange', event => {
  event.snapTargetBlock.classList.add('seen')
})

https://codepen.io/web-dot-dev/pen/rNEYYVj

Aggancio su X e Y in uno scorrevole

Lo snap scorrimento funziona per gli elementi di scorrimento che consentono lo scorrimento orizzontale e verticale. Questa demo mostra i target scrollSnapChanging e scrollSnapChange mentre scorri la griglia. Questa demo mostra come l'elemento a cui si aggancia il browser potrebbe non essere sempre quello che pensi.

Viene visualizzata una griglia di quadrati in uno scorrevole orizzontale e verticale. Il bordo tratteggiate rappresenta il target scrollSnapChanging e il bordo continuo il target scrollSnapChange. Il rosso rappresenta snapTargetInline e il blu snapTargetBlock.

https://codepen.io/web-dot-dev/pen/qBzVVdp

Due cursori collegati

Questa demo ha due contenitori con snap allo scorrimento, uno dei quali è un elenco di link di alto livello e l'altro è costituito dai contenuti effettivi paginati. Il nuovo evento scrollSnapChanging semplifica il collegamento degli stati degli snap in modo bidirezionale, in modo che siano sempre sincronizzati.

https://codepen.io/web-dot-dev/pen/YzoEEXj

Selettore colori OKLCH

Questa demo contiene tre cursori, ciascuno dei quali rappresenta un canale di colore diverso in OKLCH. L'elemento agganciato viene sincronizzato con il gruppo di radio pertinente e i dati possono essere recuperati da un modulo che racchiude gli input. Se utilizzi un mouse o un tocco, puoi scorrere fino al valore che ti interessa. Gli utenti che utilizzano la tastiera possono premere Tab e usare i tasti freccia. Per uno screen reader, è solo un modulo.

scrollSnapChanging viene utilizzato per sincronizzare anticipatamente l'elemento agganciato con lo stato, mentre scrollSnapChange viene utilizzato per animare l'intestazione del canale di colore interessato a cui è stato applicato l'input dell'utente.

https://codepen.io/web-dot-dev/pen/OJeOOVG

Hub animati con scatti e sfasamenti

Questa demo migliora progressivamente l'esperienza di scorrimento con snap con le transizioni attivate da snap utilizzando scrollsnapchange.

Verifica il supporto degli eventi con il seguente codice JavaScript:

if ('onscrollsnapchange' in window) {
  // ok to use snap change
}

https://codepen.io/web-dot-dev/pen/MWMOOae

Immissione di un righello scorrevole

Questa demo mostra un righello scorrevole come modo alternativo per scegliere una lunghezza per un input numerico. Inserisci i valori direttamente nell'input numerico o scorri fino alle dimensioni. L'evento changing viene utilizzato per cancellare la selezione durante il gesto dell'utente, mentre l'evento change viene utilizzato per aggiornare lo stato e confermare la scelta dell'utente.

https://codepen.io/web-dot-dev/pen/LYKOOpd

Flusso di copertina

Questa demo si basa sull'eccellente ricreazione dell'animazione basata sullo scorrimento di Bramus Van Damme del famoso flusso di copertine di macOS (anche tutorial video). In modo univoco, scrollSnapChanging viene utilizzato per nascondere il titolo dell'album e scrollSnapChange per presentarlo. Gli eventi consentono di nascondere il vecchio titolo e di presentare il nuovo in modo lazy.

https://codepen.io/web-dot-dev/pen/Bagmmog

Altre idee per stimolare la creatività

Ora che è facile sapere quale elemento sta per essere allineato e quale è allineato attivamente, ci sono molte nuove possibilità. Ecco un elenco di idee per stimolare la creatività e altri casi d'uso:

Attivazione del caricamento lento, noto come rendering attivato da snapchange o recupero dei dati.
Miniature di una sequenza di fotogrammi collegate a un'immagine più grande.
Attivazione/disattivazione della riproduzione/messa in pausa del trailer di un video per la miniatura di un video acquisito.
Monitoraggio di Analytics
Scrollytelling
UI/UX di Ruota della fortuna
Al target di aggancio viene assegnata una descrizione comando ancorata.
Tocca per scattare
Scatta per rivelare
Suoni su Snap
Interfaccia utente con scorrimento
Schede o caroselli scorrevoli

Ulteriori studi

Il team di Chrome è entusiasta di scoprire cosa creerai con queste nuove API e spera che ti aiutino a semplificare le tue esperienze scorrevoli.