Scrollend, um novo evento JavaScript

Exclua suas funções de tempo limite e exclua os bugs. Este é o evento de que você realmente precisa: o botão de rolagem.

Adam Argyle

Antes do evento scrollend, não havia uma maneira confiável de detectar se uma rolagem foi concluída. Isso significava que os eventos seriam disparados tarde ou enquanto o dedo do usuário ainda estivesse na tela. Essa falta de confiabilidade em saber quando a rolagem realmente terminava, resultava em bugs e em uma experiência ruim para o usuário.

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 parou para 100ms. Isso faz com que seja mais parecido com um evento de rolagem pausado, não como um evento finalizado de rolagem.

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

document.onscrollend = event => {…}

Que bom! Perfeitamente cronometrado e cheio de condições significativas antes de ser emitido.

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 polegar de rolagem. - O pressionamento de tecla do usuário é liberado. - A rolagem para 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 é disparado quando: - O gesto de um usuário não resultou em nenhuma mudança de posição de rolagem (nenhuma tradução ocorreu). - scrollTo() não resultou em nenhuma tradução.

Esse evento demorou tanto para aparecer na plataforma da Web devido aos muitos pequenos detalhes que precisavam de detalhes de especificação. Uma das áreas mais complexas era articular os detalhes do scrollend para a janela de visualização visual em relação ao documento. Considere uma página da Web na qual você aumentou o zoom. Você pode rolar quando estiver nesse estado com zoom, não necessariamente rolando o documento. Até mesmo essa interação de rolagem orientada pelo usuário da janela de visualização vai emitir o evento scrollend quando ele for concluído.

Como usar o evento

Assim como outros eventos de rolagem, é possível registrar listeners de duas maneiras.

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

aScrollingElement.addEventListener("scrollend", (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 nosso conselho. É possível continuar usando sua estratégia de fim de rolagem atual (se tiver uma) e, no início do processo, verificar o suporte com:

'onscrollend' in window
// true, if available

Isso vai retornar "true" ou "false" dependendo se o navegador oferecer o evento. 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 seu evento scrollend quando ele está disponível. Você também pode testar um polyfill (NPM) que eu fiz 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 será aprimorado progressivamente para usar o evento scrollend integrado do navegador, se disponível. Se ele não estiver disponível, o script vai observar os eventos do ponteiro e rolar a tela para fazer a melhor estimativa possível do encerramento do evento.

Casos de uso

É recomendável evitar trabalho computacionalmente pesado durante a rolagem. Essa prática garante que a rolagem seja livre para usar o máximo possível de memória e processamento, para que a experiência seja tranquila. O uso de um evento scrollend é o momento perfeito para chamar a atenção e fazer o trabalho árduo, já que 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 de interface associados com a posição em que a rolagem interrompeu. Por exemplo: - Sincronizar uma posição de rolagem do carrossel com um indicador de ponto. - Sincronizar um item da galeria com seus metadados. - Buscar dados depois que um usuário rolar para uma nova guia.

Imagine um cenário como um usuário arrastando um e-mail para fora. Depois que a pessoa terminar de deslizar, você poderá realizar a ação com base no local para onde ela rolou.

Também é possível usar esse evento para sincronização após a rolagem programática ou do usuário, ou para ações como análise 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 nessa iniciativa e a Robert Flack pelas orientações de API e implementação.