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 era possibile rilevare in modo affidabile che uno scorrimento l'operazione. Ciò significava che gli eventi venivano attivati in ritardo o nel momento in cui il dito dell'utente era ancora giù sullo schermo. L'inaffidabilità di sapere quando lo scorrimento è effettivamente terminato, causando bug e 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. Sembra più un evento di interruzione dello scorrimento, non un evento di scorrimento terminato.

Dopo il scrollend il browser esegue tutte queste difficili valutazioni.

document.onscrollend = event => {…}

Questa è la roba bella. Tempistiche perfette e ricche di condizioni significative prima dell'emissione.

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 cursore dell'utente ha rilasciato il cursore di scorrimento. - I tasti dell'utente sono stati rilasciati. - La funzionalità Scorri fino al frammento è stata completata. - L'aggancio di scorrimento è terminato. - 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 variazioni 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 a causa dei molti piccoli dettagli che richiedevano dettagli sulle specifiche. Una delle aree più complesse stava articolando i dettagli scrollend per la visualizzazione visiva rispetto al documento. Prendi in considerazione una pagina web su cui aumenti lo zoom. Puoi scorrere quando è attivo lo zoom e non necessariamente il documento. Non ti preoccupare: anche questo riquadro di scorrimento visivo l'interazione 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 potenziamento progressivo

Se vuoi utilizzare subito questo nuovo evento, ecco il nostro miglior consiglio. Puoi continuare a utilizzare la strategia di fine scorrimento corrente (se disponibile) e alla all'inizio, controlla il supporto con:

'onscrollend' in window
// true, if available

Verrà riportato true o false 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)
  }
}

È un ottimo inizio per migliorare progressivamente il tuo evento scrollend quando è disponibile. Puoi anche provare a polyfill (NPM) L'ho resa migliore il browser può:

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 guarda gli eventi del 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 sincronizza gli elementi dell'interfaccia utente associati con la posizione in cui è stata interrotta. 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 utilizzare questo evento anche per la sincronizzazione dopo la pubblicità programmatica o scorrimento o azioni come analisi dei log.

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.