Exclua suas funções de tempo limite e remova os bugs. Este é o evento de que você realmente precisa: o botão de rolagem.
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.