Scrollend, un nuovo evento JavaScript

Elimina le funzioni di timeout e risolvi i 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 dell'utente era ancora sullo schermo. Questa inaffidabilità nel sapere quando lo scorrimento è terminato ha portato a bug e a un'esperienza scadente per l'utente.

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

La strategia setTimeout() può solo rilevare se lo scorrimento si è interrotto per 100ms. In questo modo, l'evento viene considerato come una pausa dello scorrimento, non come la fine dello scorrimento.

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

document.onscrollend = event => {…}

Questa è roba buona. Perfettamente sincronizzati e ricchi di condizioni significative prima dell'emissione.

Fai una 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 cursore di scorrimento. - Il tasto premuto dall'utente è stato rilasciato. - Lo scorrimento fino al frammento è stato completato. - Lo scorrimento agganciato è stato completato. - scrollTo() è stato completato. - L'utente ha scorre la visual viewport.

L'evento scrollend non viene attivato quando: - Il gesto di un utente non ha comportato modifiche alla posizione di scorrimento (non è stata eseguita alcuna traslazione). - scrollTo() non ha prodotto alcuna traduzione.

Uno dei motivi per cui questo evento ha richiesto così tanto tempo per arrivare sulla piattaforma web è dovuto ai numerosi piccoli dettagli che necessitavano di specifiche. Una delle aree più complesse è stata l'articolazione dei dettagli di scrollend per la viewport visiva rispetto al documento. Considera una pagina web su cui esegui lo zoom. In questo stato di zoom, puoi scorrere senza necessariamente scorrere il documento. Ti assicuriamo che anche questa interazione di scorrimento basata sull'utente della visualizzazione visiva emetterà l'evento scrollend al termine.

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à dell'evento:

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

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

Polyfill e miglioramento progressivo

Se vuoi utilizzare questo nuovo evento ora, 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 true o false a seconda che il browser offra l'evento. Con questo controllo, puoi ramificare 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 l'evento scrollend quando sarà disponibile. Puoi anche provare un polyfill (NPM) che ho creato e che fa del suo meglio per 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 nel browser, se disponibile. Se non è disponibile, lo script osserva gli eventi del puntatore e scorri per stimare al meglio la fine dell'evento.

Casi d'uso

È buona norma evitare attività che richiedono molte risorse di calcolo durante lo scorrimento. Questa pratica garantisce che lo scorrimento possa utilizzare tutta la memoria e la potenza di elaborazione disponibili per mantenere l'esperienza fluida. L'utilizzo di un evento scrollend fornisce il momento perfetto per chiamare e fare il lavoro più difficile, 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 lo scorrimento si è interrotto. Ad esempio: - Sincronizzazione della posizione di scorrimento di un carosello con un indicatore a punti. - 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 scorre via un'email. Al termine dello scorrimento, puoi eseguire l'azione in base alla posizione in cui è stato effettuato lo scorrimento.

Puoi anche utilizzare questo evento per la sincronizzazione dopo lo scorrimento programmatico o dell'utente oppure per azioni come la registrazione di Analytics.

Ecco un buon esempio in cui più elementi come frecce, punti e messa a fuoco 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 la guida all'API e all'implementazione.