Eventi Snap di scorrimento

In Chrome 129 puoi utilizzare gli eventi scrollSnapChange e scrollSnapChanging da JavaScript. Implementando gli eventi di agganciamento incorporati, lo stato di agganciamento precedentemente invisibile diventerà utilizzabile, al momento giusto e sempre corretto. Non è una comodità che avresti avuto senza questi eventi.

Prima di scrollSnapChange, potevi utilizzare un osservatore di intersezione per trovare quale elemento attraversava la porta di scorrimento, ma la determinazione di ciò che era agganciato era limitata ad alcune circostanze. Ad esempio, puoi rilevare se gli elementi di agganciamento riempiono la porta di scorrimento o la maggior parte di quest'ultima. A tal fine, osservi che gli elementi dell'area di scorrimento si intersecano. In base all'elemento che occupa la maggior parte dell'area di scorrimento, supponiamo che si tratti del target di agganciamento, quindi attendi scrollend e agisci sull'elemento agganciato (la destinazione dello agganciamento).

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

Ottime notizie, questi nuovi eventi rendono queste informazioni disponibili in modo rapido e semplice. In questo modo si sbloccano interazioni di aggancio di scorrimento per andare oltre le loro funzionalità attuali e si consente l'orchestrazione delle relazioni di posizionamento dello scorrimento e nuovi scenari di feedback nell'interfaccia utente.

scrollSnapChange

Questo evento viene attivato solo se un gesto di scorrimento ha comportato l'applicazione di un nuovo target di snapshot nell'ordine seguente

1. Quando la pergamena si è riposata.
2. Prima del giorno scrollend.

Questo evento viene attivato poco prima del giorno scrollend, al termine dello scorrimento e solo se era stato posizionato un nuovo obiettivo di agganciamento. 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 all'oggetto evento come snapTargetBlock e snapTargetInline. Se lo scorrimento è solo orizzontale, la proprietà snapTargetBlock sarà null. Il valore della proprietà sarà il nodo dell'elemento.

Dettagli univoci per scorrimentoSnapChange

Non si attiva 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 si attiva se il target dello snapshot non è cambiato

L'evento è per la modifica dello snapshot e, se la destinazione dello snapshot non è cambiata, l'evento non si attiverà, anche se un utente ha interagito con lo scorrimento. Tuttavia, l'utente ha eseguito lo scorrimento, quindi al termine dello scorrimento l'evento scrollend viene comunque attivato.

scrollSnapChanging

Questo evento viene attivato non appena il browser stabilisce che il gesto di scorrimento ha o comporterà una nuova destinazione di agganciamento. 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 all'oggetto evento come snapTargetBlock e snapTargetInline. Se lo scorrimento è solo verticale, la proprietà snapTargetInline sarà null. Il valore della proprietà sarà il nodo dell'elemento.

Dettagli univoci per scorrimentoSnapChange

Si attiva 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. Considera un utente che scorre lentamente senza sollevare un dito: scrollSnapChanging si attiva più volte durante il gesto purché l'utente stia eseguendo la panoramica su più potenziali obiettivi di agganciamento. Ogni volta che l'utente scorre la pagina, se il browser stabilisce che al momento del rilascio si troverà su un nuovo target di agganciamento, l'evento si attiva per indicare l'elemento.

Non attiva tutti i target degli snapshot lungo il percorso verso un nuovo target di snapshot

Inoltre, considera un'azione in cui l'utente esegue un gesto di scorrimento che copre più bersagli agganciati contemporaneamente; questo evento si attiverà una volta con il target su cui si baserà. Quindi è impaziente ma non sprecativo, fornirti l'obiettivo agganciato il prima possibile.

Casi d'uso ed esempi

Questi eventi abilitano molti nuovi casi d'uso, semplificando al contempo l'implementazione dei pattern attuali. Un ottimo esempio è l'attivazione dell'animazione attivata a scatto. Visualizzazione contestuale dell'elemento agganciato, dei relativi elementi secondari o delle informazioni associate quando è impostato come target.

Gli schemi riportati di seguito mostrano alcuni casi d'uso per aiutarti a essere subito produttivo.

Evidenzia una testimonianza

Questo esempio promuove o concentra visivamente la testimonianza agganciata.

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

Mostra la didascalia per l'elemento agganciato

Questo esempio mostra la didascalia per l'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.

Crea un'animazione una volta sola, per i bambini di una slide di una presentazione agganciata

Questo esempio sa quando una nuova slide è stata atterrata e posizionata correttamente, il che è un ottimo momento per animare i contenuti una volta.

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

Aggancio sia alla x che alla y in uno scorrimento

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.

Due dispositivi di scorrimento collegati

Questa demo ha due container con agganciamento a scorrimento, dove uno è un elenco di link di alto livello e l'altro i contenuti effettivi delle pagine. Il nuovo evento scrollSnapChanging rende semplice collegare gli stati di agganciamento di questi oggetti in modo bidirezionale, in modo che siano sempre sincronizzati.

selettore colori OKLCH

Questa demo ha 3 scorrimenti, ognuno dei quali rappresenta un canale di colori diversi 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. Per un utente con il mouse o il tocco, puoi scorrere fino al valore desiderato. Se usi la tastiera, puoi usare il tasto Tab e i tasti freccia. Per uno screen reader, è solo un modulo.

Aggancia a 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 JavaScript:

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

Input righello scorrevole

Questa demo presenta un righello scorrevole come metodo alternativo per scegliere una lunghezza per l'inserimento di un numero. Inserisci i valori direttamente nell'input del numero o scorri fino alla dimensione. L'evento di modifica viene utilizzato per cancellare la selezione durante il gesto dell'utente, mentre l'evento di modifica per aggiornare lo stato e rafforzare la scelta dell'utente.

Flusso della copertura

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, viene utilizzato scrollSnapChanging per nascondere il titolo dell'album e scrollSnapChange per presentare il titolo. Gli eventi aiutano a organizzare una presentazione entusiasta del vecchio titolo e una presentazione pigra di quello nuovo.

Altre idee per ispirare la creatività

Ora che è banale sapere quale elemento sta per essere agganciato e quale 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 delle strisce 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
• Scorrimento
• UI/UX della Ruota della fortuna
• La destinazione dello snapshot riceve una descrizione comando ancorata.
• Tocca per scattare
• Aggancia per rivelare
• Suoni istantanei
• UI con scorrimento
• Schede o caroselli a scorrimento

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.

Risorse:

• Specifiche CSS
• Video esplicativi con "scroll Snap"
• Raccolta CodePen