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.
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).
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')
}
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
.
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')
})
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.
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.
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.
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
}
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.
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.
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.