Scrollend, un nuovo evento JavaScript

Elimina le funzioni di timeout e sbarazzati dei 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 è effettivamente terminato ha causato bug e un'esperienza utente scadente.

Prima

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

Il meglio che questa strategia setTimeout() può fare è sapere se lo scorrimento si è interrotto per 100ms. Questo lo rende più simile a un evento di pausa dello scorrimento, non a un evento di fine dello scorrimento.

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

Dopo

document.onscrollend = event => {…}

Questa è roba buona. Con un tempismo perfetto e ricche di condizioni significative prima dell'emissione.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Fai una prova!

Dettagli dell'evento

L'evento scrollend viene attivato quando: - Il browser non anima o non traduce più lo scorrimento. - L'utente ha rilasciato il tocco. - Il puntatore dell'utente ha rilasciato il cursore di scorrimento. - L'utente ha rilasciato il tasto. - Lo scorrimento al frammento è stato completato. - L'allineamento dello scorrimento è stato completato. - scrollTo() è stata completata. - 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 si è verificata alcuna traslazione). - scrollTo() non ha generato alcuna traduzione.

Uno dei motivi per cui questo evento ha impiegato così tanto tempo per arrivare sulla piattaforma web è stato il gran numero di piccoli dettagli che richiedevano specifiche. Uno degli aspetti più complessi è stato definire i dettagli di scrollend per la finestra visiva rispetto al documento. Prendi in considerazione una pagina web su cui esegui lo zoom. Puoi scorrere la pagina quando è ingrandita, ma non necessariamente il documento. Ti assicuriamo che anche questa interazione di scorrimento guidata dall'utente della finestra visiva emetterà l'evento scrollend una volta completata.

Utilizzo dell'evento

Come per altri eventi di scorrimento, puoi registrare i listener in un paio di modi.

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

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

In alternativa, utilizza la proprietà evento:

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

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

Polyfill e potenziamento progressivo

Se vuoi utilizzare questo nuovo evento ora, ecco il nostro consiglio migliore. Puoi continuare a utilizzare la tua strategia attuale per la fine dello scorrimento (se ne hai una) e, all'inizio, verificare il supporto con:

'onscrollend' in window
// true, if available

che restituirà true o false a seconda che il browser offra o meno l'evento. Con questo controllo, puoi creare un ramo del codice:

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

Questo è un buon punto di partenza per migliorare progressivamente l'evento scrollend quando è disponibile. Puoi anche provare un polyfill (NPM) che ho creato e che fa il meglio che il browser può fare:

import {scrollend} from "scrollyfills"

// then use scrollend as if it's existed this whole time
document.onscrollend = callback

Il polyfill migliorerà progressivamente per utilizzare l'evento scrollend integrato nel browser, se disponibile. Se non è disponibile, lo script monitora gli eventi del puntatore e lo scorrimento per fare la migliore stima possibile della fine dell'evento.

Casi d'uso

È buona norma evitare operazioni di calcolo pesanti durante lo scorrimento. Questa pratica garantisce che lo scorrimento possa utilizzare tutta la memoria e l'elaborazione necessarie per mantenere un'esperienza fluida. L'utilizzo di un evento scrollend è il momento perfetto per richiamare ed eseguire il lavoro più impegnativo, perché lo scorrimento non è più in corso.

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 si è interrotto. Ad esempio: - Sincronizzazione di una posizione di scorrimento del carosello con un indicatore a punto. - 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 un'email per eliminarla. Al termine dello scorrimento, puoi eseguire l'azione in base alla posizione raggiunta.

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

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 di progettazione e Robert Flack per le indicazioni sull'API e sull'implementazione.