Elimina le tue funzioni di timeout e scuoti i relativi bug. Ecco l'evento che ti serve davvero: scorriend.
Prima dell'evento scrollend, non era possibile rilevare in modo affidabile il completamento di uno scorrimento. Ciò significava che gli eventi si attivavano in ritardo o mentre il dito dell'utente
era ancora giù sullo schermo. L'inaffidabilità di sapere quando lo scorrimento è effettivamente terminato
portava a bug e a 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 è più simile a un evento di scorrimento che ha messo in pausa, non a uno scorrimento.
Dopo l'evento
scrollend, il browser esegue tutta questa difficile valutazione per te.
document.onscrollend = event => {…}
Questa è la roba bella. Tempismo perfetto e pieno di condizioni significative prima di essere emesso.
Prova!
Dettagli dell'evento
L'evento scrollend viene attivato quando:
- Il browser non anima o traduce più lo scorrimento.
- Il tocco dell'utente è stato rilasciato.
- Il puntatore dell'utente ha rilasciato il pollice di scorrimento.
- I tasti dell'utente sono stati rilasciati.
- Lo scorrimento fino al frammento è stato completato.
- L'aggancio di scorrimento è stato completato.
- Percentuale di completamento: scrollTo().
- L'utente ha fatto scorrere l'area visibile.
L'evento scrollend non si attiva quando:
- Il gesto di un utente non ha generato modifiche della posizione di scorrimento (non è stata eseguita alcuna traduzione).
- scrollTo() non ha restituito alcuna traduzione.
Un motivo per cui questo evento ha richiesto molto tempo per arrivare sulla piattaforma web è stato dovuto ai molti piccoli dettagli che richiedevano informazioni dettagliate. Una delle aree più complesse
è stata l'articolazione dei dettagli scrollend dell'area visibile
rispetto al documento. Considera una pagina web su cui aumenti lo zoom. Quando è attivo lo zoom, puoi scorrere più avanti
e non necessariamente il documento viene fatto scorrere. Ti garantisco che anche questa interazione con scorrimento guidata dall'utente dell'area visibile visiva emetterà l'evento scrollend una volta completato.
Utilizzo dell'evento
Come per gli altri eventi di scorrimento, puoi registrare i listener in un paio di modi.
addEventListener("scrollend", (event) => {
// scroll ended
});
aScrollingElement.addEventListener("scrollend", (event) => {
// scroll ended
});
In alternativa, utilizza la proprietà evento:
document.onscrollend = (event) => {
// scroll ended
};
aScrollingElement.onscrollend = (event) => {
// scroll ended
};
Polyfill e miglioramento progressivo
Se vuoi usufruire subito di questo nuovo evento, ecco il nostro consiglio migliore. Puoi continuare a utilizzare la strategia di fine scorrimento corrente (se disponibile) e, all'inizio, verificare il supporto con:
'onscrollend' in window
// true, if available
Viene indicato vero o falso a seconda che il browser offra l'evento. Con questo controllo, puoi suddividere 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 ottimo inizio per migliorare progressivamente il tuo evento scrollend quando
è disponibile. Potresti anche provare un metodo
polyfill
(NPM) creato che migliori
il browser in uso:
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 osserva gli eventi puntatore e
scorri per stimare al meglio l'evento che può terminare.
Casi d'uso
È buona norma evitare di svolgere attività impegnative dal punto di vista computazionale durante lo scorrimento. In questo modo, lo scorrimento consente di utilizzare tutta la memoria e l'elaborazione possibili per rendere l'esperienza fluida. L'utilizzo di un evento scrollend
rappresenta il momento perfetto per richiamare l'attenzione e dedicarsi al lavoro più impegnativo, perché non è più necessario scorrere
le informazioni.
L'evento scrollend può essere utilizzato per attivare varie azioni. Un caso d'uso comune
è la sincronizzazione degli elementi dell'interfaccia utente associati con la posizione in cui lo scorrimento
è interrotto. Ad esempio:
- Sincronizzazione della posizione di scorrimento di un carosello con un indicatore di puntini.
- Sincronizzazione di un elemento della galleria con i relativi metadati.
- Recupero dei dati dopo che un utente scorre fino a una nuova scheda.
Immagina uno scenario come un utente che fa scorrere un'email per nasconderla. Dopo aver finito di scorrere, puoi eseguire l'azione in base a dove l'hanno fatto scorrere.
Puoi utilizzare questo evento anche per la sincronizzazione dopo lo scorrimento programmatico o dell'utente oppure per azioni come l'analisi dei log.
Ecco un buon esempio in cui più elementi, come frecce, punti e 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.
Ringraziamo Mehdi Kazemi per il lavoro tecnico e Robert Flack per indicazioni su API e implementazione.