Scrollend, un nuovo evento JavaScript

Elimina le tue funzioni di timeout e scuoti i relativi bug. Ecco l'evento che ti serve davvero: scorriend.

Adam Argyle

Prima dell'evento scrollend, non esisteva un modo affidabile per rilevare 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. Questa inaffidabilità nel sapere quando lo scorrimento è effettivamente terminato ha portato a bug e a un'esperienza utente negativa.

Prima

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.

Dopo

document.onscrollend = event => {…}

Ecco, questa è la parte buona. Perfettamente sincronizzati e ricchi di condizioni significative prima dell'emissione.

Supporto dei browser

• 114
• 114
• 109
• x

Origine

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. - La pressione dei tasti dell'utente è stata rilasciata. - 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 si attiva quando: - Il gesto di un utente non ha generato modifiche della posizione di scorrimento (non è stata eseguita alcuna traduzione). - 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. Quando è attivo lo zoom, puoi scorrere intorno e non è necessariamente necessario 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 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à 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 osserva gli eventi puntatore e scorri per stimare al meglio l'evento che può terminare.

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.