Elimina le funzioni di timeout e elimina i loro bug, ecco l'evento che ti serve davvero: scrollend.
Prima dell'evento scrollend, non esisteva un modo affidabile per rilevare il completamento di uno scorrimento. Ciò significava che gli eventi venivano attivati in ritardo o mentre l'utente
era ancora in basso sullo schermo. Sapere quando lo scorrimento
è terminato, causava bug e un'esperienza negativa per l'utente.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Il meglio che questa strategia di setTimeout() può fare è sapere se lo scorrimento si è interrotto per
100ms. In questo modo sarà più simile a un evento di scorrimento che ha messo in pausa l'evento, non a un evento di scorrimento terminato.
Dopo l'evento scrollend, il browser esegue per te questa difficile valutazione.
document.onscrollend = event => {…}
Questa è la roba buona. Con timestamp perfetto e pieno di condizioni significative prima dell'emissione.
Prova!
Dettagli dell'evento
L'evento scrollend si attiva quando:
- Il browser non esegue più animazioni né traduci lo scorrimento.
- Il tocco dell'utente è stato revocato.
- Il puntatore dell'utente ha rilasciato il pollice di scorrimento.
- La pressione dei tasti dell'utente è stata interrotta.
- Scorri fino al completamento del frammento.
- L'agganciamento dello scorrimento è stato completato.
- scrollTo() completato.
- L'utente ha fatto scorrere l'area visibile.
L'evento scrollend non viene attivato quando:
- Il gesto di un utente non ha generato modifiche di posizione dello scorrimento (non è stata eseguita alcuna traduzione).
- scrollTo() non ha restituito alcuna traduzione.
Uno dei motivi per cui questo evento ha richiesto così tanto tempo sulla piattaforma web è dovuto ai molti
piccoli dettagli che richiedevano dettagli sulle specifiche. Una delle aree più complesse
era articolare i dettagli scrollend per l'area visibile visiva
rispetto al documento. Considera una pagina web su cui aumenti lo zoom. Puoi scorrere
in questo stato di zoom e non devi necessariamente scorrere il
documento. Ti assicuriamo che anche questa interazione di scorrimento guidata dall'utente dell'area visibile visiva
emette l'evento scrollend una volta completata.
Utilizzo dell'evento
Come per gli altri eventi di scorrimento, puoi registrare i listener in due modi.
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
oppure utilizza la proprietà event:
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Polyfill e miglioramento progressivo
Se vuoi utilizzare subito questo nuovo evento, ecco il nostro consiglio migliore. Puoi continuare a utilizzare la tua attuale strategia di fine scorrimento (se ne hai una) e all'inizio verificare il supporto con:
'onscrollend' in window
// true, if available
Verrà restituito un valore true o false a seconda che il browser offra l'evento. Con questo controllo, puoi diramare il codice:
if ('onscrollend' in window) {
document.onscrollend = callback
}
else {
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
}
Si tratta di un buon inizio per migliorare progressivamente il tuo evento scrollend quando è disponibile. Puoi anche provare un polyfill (NPM) che ho creato in modo ottimale con il browser in grado di:
import {scrollend} from "scrollyfills"
// then use scrollend as if it's existed this whole time
document.onscrollend = callback
Il polyfill verrà migliorato progressivamente per utilizzare l'evento scrollend integrato del browser, se disponibile. Se non è disponibile, lo script controlla gli eventi di puntatore e lo scorrimento per fare una stima più precisa dell'evento che può terminare.
Casi d'uso
È buona norma evitare un lavoro intensivo di calcolo durante lo scorrimento. In questo modo, lo scorrimento è libero e consente di utilizzare tutta la memoria e l'elaborazione possibili per un'esperienza fluida. L'utilizzo di un evento scrollend
è il momento ideale per richiamare l'attenzione e lavorare sodo, perché lo scorrimento
non avviene più.
L'evento scrollend può essere utilizzato per attivare varie azioni. Un caso d'uso comune è la sincronizzazione degli elementi UI associati con la posizione in cui lo scorrimento è stato interrotto. Ad esempio:
- Sincronizzazione della posizione di scorrimento del carosello con un indicatore a forma di punto.
- Sincronizzazione di un elemento della galleria con i relativi metadati.
- Recupero dei dati dopo che un utente scorre su una nuova scheda.
Immagina uno scenario come un utente che scorre via un'email. Al termine dello scorrimento, puoi eseguire l'azione in base a dove hanno fatto scorrere.
Puoi utilizzare questo evento anche per la sincronizzazione dopo lo scorrimento programmatico o dell'utente oppure per azioni come l'analisi del logging.
Ecco un buon esempio in cui più elementi, come frecce, punti ed stato attivo, devono essere aggiornati in base alla posizione di scorrimento. Guarda come ho creato questo carosello su YouTube. Inoltre, prova la demo dal vivo.
Grazie a Mehdi Kazemi per il lavoro ingegneristico e a Robert Flack per le indicazioni relative ad API e implementazione.