Scrollend, um novo evento JavaScript

Exclua suas funções de tempo limite e se livre dos bugs. Este é o evento que você realmente precisa: scrollend.

Adam Argyle

Antes do evento scrollend, não havia uma maneira confiável de detectar que uma rolagem havia sido concluída. Isso significava que os eventos eram acionados com atraso ou enquanto o dedo do usuário ainda estava na tela. Essa falta de confiabilidade em saber quando a rolagem realmente terminou levou a bugs e a uma experiência ruim para o usuário.

Antes

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

O melhor que essa estratégia de setTimeout() pode fazer é saber se a rolagem foi interrompida para 100ms. Isso faz com que ele se pareça mais com um evento de pausa de rolagem, não de fim de rolagem.

Após o evento scrollend, o navegador faz toda essa avaliação difícil para você.

Depois

document.onscrollend = event => {…}

Isso é bom demais. Perfeitamente cronometrado e cheio de condições significativas antes de emitir.

Browser Support

• 114
• 114
• 109
• 26.2

Source

Faça um teste

Detalhes do evento

O evento scrollend é acionado quando: - O navegador não está mais animando ou traduzindo a rolagem. - O toque do usuário foi liberado. - O ponteiro do usuário soltou o controle de rolagem. - O usuário soltou a tecla. - A rolagem até o fragmento foi concluída. - O ajuste de rolagem foi concluído. - scrollTo() foi concluído. - O usuário rolou a janela de visualização.

O evento scrollend não é acionado quando: - O gesto de um usuário não resulta em mudanças na posição de rolagem (não ocorre translação). - scrollTo() não resultou em nenhuma tradução.

Um dos motivos para esse evento ter demorado tanto para chegar à plataforma da Web foi o grande número de pequenos detalhes que precisavam de especificações. Uma das áreas mais complexas foi articular os detalhes de scrollend para a janela de visualização em comparação com o documento. Considere uma página da Web em que você dá zoom. É possível rolar a tela quando ela está ampliada, e isso não necessariamente rola o documento. Mesmo essa interação de rolagem orientada pelo usuário da janela de visualização visual vai emitir o evento scrollend quando for concluída.

Usando o evento

Como em outros eventos de rolagem, é possível registrar listeners de algumas maneiras.

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

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

ou use a propriedade do evento:

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

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

Polyfills e aprimoramento progressivo

Se você quiser usar esse novo evento agora, confira nossa melhor dica. Você pode continuar usando sua estratégia atual de fim de rolagem (se tiver uma) e, no início dela, verificar a compatibilidade com:

'onscrollend' in window
// true, if available

Isso vai informar se o navegador oferece o evento ou não. Com essa verificação, é possível ramificar o código:

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

Esse é um bom começo para melhorar progressivamente o evento scrollend quando ele estiver disponível. Você também pode tentar um polyfill (NPM) que eu fiz e que faz o melhor que o navegador pode:

import {scrollend} from "scrollyfills"

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

O polyfill vai usar o aprimoramento progressivo para usar o evento scrollend integrado ao navegador, se disponível. Se não estiver disponível, o script vai monitorar os eventos de ponteiro e rolagem para fazer a melhor estimativa possível do encerramento do evento.

Casos de uso

É uma boa prática evitar trabalhos computacionalmente pesados durante a rolagem. Essa prática garante que a rolagem use o máximo de memória e processamento possível para manter a experiência fluida. O uso de um evento scrollend oferece o momento perfeito para chamar e fazer o trabalho pesado, porque a rolagem não está mais acontecendo.

O evento scrollend pode ser usado para acionar várias ações. Um caso de uso comum é sincronizar elementos da interface associados com a posição em que a rolagem parou. Por exemplo: - Sincronizar uma posição de rolagem de carrossel com um indicador de ponto. - Sincronizar um item da galeria com os metadados dele. - Buscar dados depois que um usuário rola para uma nova guia.

Imagine um cenário em que um usuário desliza um e-mail para dispensá-lo. Depois que o usuário terminar de deslizar, você poderá realizar a ação com base no local para onde ele rolou.

Você também pode usar esse evento para sincronizar após a rolagem programática ou do usuário, ou ações como análise de dados de registros.

Este é um bom exemplo em que vários elementos, como setas, pontos e foco, precisam ser atualizados com base na posição de rolagem. Assista como criei esse carrossel no YouTube. Além disso, teste a demonstração ao vivo.

Agradecemos a Mehdi Kazemi pelo trabalho de engenharia e a Robert Flack pelas orientações sobre a API e a implementação.