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

In 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).

Prima del giorno scrollSnapChanging, tuttavia, era impossibile sapere quando cambia il target dello snapshot o come viene modificato (ad esempio a causa di uno scorrimento).

Viene mostrato uno scorrimento orizzontale con all'interno delle caselle numerate come target di agganciamento. 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 aggancio 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 snap. In questo modo l'evento sembra lento 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 delle dita su un trackpad indicano che il gesto dell'utente non ha terminato lo scorrimento, il che significa che lo scorrimento non è terminato, il che significa che l'obiettivo di posizionamento non è ancora cambiato ed è in attesa di un gesto dell'utente completo.

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 aggancio. Si attiva con entusiasmo 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 il gesto di scorrimento completo dell'utente, questo evento viene attivato mentre l'utente scorre con il dito o utilizza 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 snap, 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 più rapidamente 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.

Gli schemi riportati di seguito mostrano alcuni casi d'uso per aiutarti a essere subito 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. In questa demo sono inclusi entrambi gli eventi, per cui puoi vedere le differenze in termini di tempistiche ed esperienza utente tra scrollSnapChange e scrollSnapChanging.

Modifica dello scatto
https://codepen.io/web-dot-dev/pen/wvLPPBL

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

Crea un'animazione una volta sola, per i bambini di una slide di una 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

L'aggancio di scorrimento funziona per gli strumenti 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 di snap dello 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, ognuno dei quali rappresenta un canale di colore diverso in OKLCH. L'elemento agganciato viene sincronizzato con il relativo gruppo di pulsanti di opzione e i dati possono essere recuperati da un modulo che aggrega gli input. Se utilizzi un mouse o un tocco, puoi scorrere fino al valore che ti interessa. Se usi la tastiera, puoi usare il tasto Tab e 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

Agganciamento di hub animati sbalorditivi

Questa demo migliora progressivamente l'esperienza di aggancio dello scorrimento con transizioni attivate tramite l'utilizzo di 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 con scorrimento dell'animazione di Braus Van Damme del famoso flusso di copertina di macOS (anche tutorial video). In modo univoco, scrollSnapChanging viene utilizzato per nascondere il titolo dell'album e scrollSnapChange per presentarlo. Gli eventi aiutano a organizzare una presentazione entusiasta del vecchio titolo e una presentazione pigra di quello nuovo.

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 ispirare la creatività e altri casi d'uso:

L'attivazione del caricamento lento, noto come Snapchange, ha attivato il rendering o il recupero dei dati.
Miniature di una sequenza di fotogrammi collegate a un'immagine più grande.
Attivare/disattivare la riproduzione/pausa del trailer di un video per la miniatura di un video agganciato.
Monitoraggio di Analytics
Scrollytelling
UI/UX della 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 sapere cosa crei con queste nuove API e speriamo che ti aiuti a semplificare le esperienze scorrevoli.