Scrollend, un nuovo evento JavaScript

Elimina le funzioni di timeout e sbarazzati dei relativi bug. Ecco l'evento di cui hai davvero bisogno: scrollend.

Adam Argyle

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 il dito di un utente era ancora premuto sullo schermo. Questa inaffidabilità nel sapere quando lo scorrimento è effettivamente terminato ha portato a bug e a un'esperienza utente negativa.

document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Il massimo che questa strategia setTimeout() può fare è sapere se la scorrimento si è fermato per 100ms. Sembra più un evento di interruzione dello scorrimento, non un evento di scorrimento terminato.

Dopo l'evento scrollend, il browser esegue tutta questa difficile valutazione per te.

document.onscrollend = event => {…}

Ecco, questa è la parte buona. Con tempistiche perfette e ricco di condizioni significative prima dell'emissione.

Prova!

Dettagli dell'evento

L'evento scrollend viene attivato quando: - Il browser non esegue più l'animazione o la translazione dello scorrimento. - Il tocco dell'utente è stato rilasciato. - Il cursore dell'utente ha rilasciato il cursore di scorrimento. - Il tasto premuto dall'utente è stato rilasciato. - La funzionalità Scorri fino al frammento è stata completata. - Lo snap scorrevole è stato completato. - scrollTo() è stato completato. - L'utente ha fatto scorrere l'area visibile.

L'evento scrollend non viene attivato quando: - il gesto di un utente non ha comportato modifiche alla posizione di scorrimento (non è avvenuta alcuna transizione). - scrollTo() non ha generato alcuna traduzione.

Uno dei motivi per cui questo evento ha impiegato così tanto tempo per essere implementato nella piattaforma web è dovuto ai numerosi dettagli minori che richiedevano una specifica dettagliata. Una delle aree più complesse è stata l'articolazione dei dettagli scrollend per la visualizzazione della visualizzazione rispetto al documento. Prendi in considerazione una pagina web su cui aumenti lo zoom. Puoi scorrere quando è attivo lo zoom e non necessariamente scorrere il documento. Ti garantiamo che anche questa interazione di scorrimento della visualizzazione visiva basata sull'utente emetterà l'evento scrollend al termine.

Utilizzo dell'evento

Come per altri eventi di scorrimento, puoi registrare gli ascoltatori in due modi.

addEventListener("scrollend", (event) => {
  // scroll ended
});

aScrollingElement.addEventListener("scrollend", (event) => {
  // scroll ended
});

In alternativa, utilizza la proprietà event:

document.onscrollend = (event) => {
  // scroll ended
};

aScrollingElement.onscrollend = (event) => {
  // scroll ended
};

Polyfill e potenziamento progressivo

Se vuoi utilizzare subito questo nuovo evento, ecco il nostro miglior consiglio. Puoi continuare a utilizzare la tua attuale strategia di fine scorrimento (se ne hai una) e all'inizio controllare l'assistenza con:

'onscrollend' in window
// true, if available

Verrà riportato true o false a seconda che il browser offra l'evento. Con questo controllo, puoi eseguire il branching del codice:

if ('onscrollend' in window) {
  document.onscrollend = callback
}
else {
  document.onscroll = event => {
    clearTimeout(window.scrollEndTimer)
    window.scrollEndTimer = setTimeout(callback, 100)
  }
}

È un buon inizio per migliorare progressivamente l'evento scrollend quando sarà disponibile. Puoi anche provare un polyfill (NPM) che ho creato e che fa il meglio che può fare il browser:

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 monitora gli eventi del cursore e scorrimento per fare la migliore stima possibile della fine dell'evento.

Casi d'uso

È buona norma evitare operazioni di calcolo complesse durante lo scorrimento. Questa pratica garantisce che lo scorrimento possa utilizzare quanta più memoria e potenza di elaborazione possibile per mantenere l'esperienza fluida. L'utilizzo di un evento scrollend offre il momento perfetto per eseguire le operazioni più complesse, 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 dell'interfaccia utente associati con la posizione in cui si è interrotto lo scorrimento. 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 in cui un utente elimina un'email. Al termine del scorrimento, puoi eseguire l'azione in base alla posizione in cui ha effettuato lo scorrimento.

Puoi anche utilizzare questo evento per la sincronizzazione dopo lo scorrimento programmatico o dell'utente o per azioni come il logging di analisi.

Ecco un buon esempio in cui più elementi, come frecce, puntini 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.

Grazie a Mehdi Kazemi per il suo lavoro di ingegneria e a Robert Flack per le indicazioni sull'API e sull'implementazione.