Scrollend, un nuovo evento JavaScript

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

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. Questa inaffidabilità nel sapere quando lo scorrimento ha 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. In questo modo è più simile a un evento di scorrimento che ha messo in pausa, non a uno 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 puntatore dell'utente ha rilasciato il pollice di scorrimento. - I tasti dell'utente sono stati rilasciati. - Lo scorrimento fino al frammento è stato completato. - L'aggancio di scorrimento è stato completato. - Percentuale di completamento: scrollTo(). - 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. Considera una pagina web su cui aumenti lo zoom. Puoi scorrere quando è attivo lo zoom e non corrisponde necessariamente allo scorrimento 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 miglioramento progressivo

Se vuoi usufruire subito di questo nuovo evento, ecco il nostro consiglio migliore. 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

Viene indicato vero o falso 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)
  }
}

Questo è 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 consentirti di utilizzare il browser scrollend integrato evento, se disponibile. Se non è disponibile, lo script controlla gli eventi del puntatore e scorri per stimare al meglio l'evento che può terminare.

Casi d'uso

È buona norma evitare di svolgere attività impegnative dal punto di vista computazionale durante lo scorrimento in cui ciò che accade. In questo modo si garantisce che lo scorrimento sia libero di utilizzare quanta memoria e per garantire un'esperienza fluida. Utilizzo di un evento scrollend offre il momento perfetto per parlare e svolgere il lavoro più impegnativo, perché lo scorrimento è non accade 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 come un utente che fa scorrere un'email per nasconderla. Al termine puoi eseguire l'azione in base a dove è stato fatto scorrere.

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, punti e focus, 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 tecnico e Robert Flack per indicazioni su API e implementazione.