Scrollend, um novo evento JavaScript

Exclua suas funções de tempo limite e remova 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 que uma rolagem foi concluída. Isso significava que os eventos eram disparados tarde ou enquanto o dedo do usuário ainda estava na tela. Essa falta de confiabilidade em saber quando a rolagem acabava levando a bugs e a uma experiência ruim para o usuário.

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

A melhor estratégia que essa estratégia setTimeout() pode fazer é saber se a rolagem parou por 100ms. Isso faz parecer que uma rolagem tem um evento pausado, e não uma rolagem evento encerrado.

Após o scrollend o navegador fará toda essa avaliação difícil para você.

document.onscrollend = event => {…}

Que bom! No momento certo, cheio de condições incríveis antes da emissão.

Faça um teste

Detalhes do evento

O evento scrollend é disparado quando: - O navegador não está mais animando nem traduzindo 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 alterações de posição de rolagem (nenhuma tradução ocorreu). - scrollTo() não resultou em nenhuma tradução.

Um motivo pelo qual esse evento demorou tanto para chegar à plataforma da Web foi devido aos inúmeros pequenos detalhes que precisavam de detalhes de especificação. Uma das áreas mais complexas estava articulando os detalhes de 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 neste estado com zoom, e não necessariamente rolando documento. Tenha certeza de que mesmo essa rolagem visual orientada pelo usuário interaçã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. Você pode continue usando sua estratégia atual de fim de rolagem (se tiver uma) e no no começo, verifique o suporte com:

'onscrollend' in window
// true, if available

Isso vai retornar "true" ou "false" dependendo se o navegador oferecer o evento. Com é 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 tentar polyfill (link em inglês) (NPM) Fiz isso da melhor forma possível. 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 navegador integrado scrollend se disponível. Se ele não estiver disponível, o script observará eventos de ponteiro e role para fazer a melhor estimativa possível do encerramento do evento.

Casos de uso

É recomendado evitar trabalho computacionalmente pesado durante a rolagem acontecendo. Essa prática garante que a rolagem fique livre para usar o máximo de memória e processamento para manter a experiência tranquila. Como usar um evento scrollend oferece o momento perfeito para chamar a atenção e fazer o trabalho árduo, 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 está sincronizando elementos de IU associados com a posição em que a rolagem parou. Por exemplo: - Sincronização de 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. Após a conclusão deslizando, você pode realizar a ação com base no local para onde a pessoa rolou.

Você também pode usar esse evento para sincronizar após eventos programáticos ou rolagem ou ações, como a 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 nessa iniciativa e a Robert Flack pelas orientações de API e implementação.