Resumo : neste tutorial, você aprenderá sobre eventos de rolagem JavaScript e como lidar com eventos de rolagem corretamente.
Introdução aos eventos de rolagem JavaScript
Quando você rola um documento ou elemento, os eventos de rolagem são acionados. Você pode acionar os eventos de rolagem das seguintes maneiras, por exemplo:
- Usando a barra de rolagem manualmente
- Usando a roda do mouse
- Clicar em um link de ID
- Chamando funções em JavaScript
Para registrar um scrollmanipulador de eventos, você chama o addEventListener()método no elemento de destino, assim:
targetElement.addEventListener('scroll', (event) => {
// handle the scroll event
});Linguagem de código: PHP ( php )ou atribua um manipulador de eventos à onscrollpropriedade do elemento de destino:
targetElement.onscroll = (event) => {
// handle the scroll event
};Linguagem de código: JavaScript ( javascript )Rolando o documento
Normalmente, você manipula os scrolleventos no windowobjeto para manipular a rolagem de toda a página da web.
Veja a seguir como anexar um manipulador de eventos ao scrollevento de uma página:
window.addEventListener('scroll',(event) => {
console.log('Scrolling...');
});Linguagem de código: JavaScript ( javascript )Ou você pode usar a onscrollpropriedade no windowobjeto:
window.onscroll = function(event) {
//
};Linguagem de código: JavaScript ( javascript )A onscrollpropriedade do windowobjeto é a mesma document.body.onscrolle você pode usá-los de forma intercambiável, por exemplo:
document.body.onscroll = null;
console.log(window.onscroll); // null
Linguagem de código: JavaScript ( javascript )Deslocamentos de rolagem
O windowobjeto possui duas propriedades relacionadas aos eventos de rolagem: scrollXe scrollY.
As propriedades scrollXe scrollYretornam o número de pixels que o documento está atualmente rolando horizontal e verticalmente. Os scrollXe scrollYsão valores de ponto flutuante de precisão dupla, portanto, se você precisar de valores inteiros, poderá usá-los Math.round()para arredondá-los.
Os scrollXe scrollYsão 0 se o documento não tiver sido rolado.
Os pageXOffsete pageYOffsetsão apelidos das propriedades scrollXe scrollY.
Rolando um elemento
Assim como o windowobjeto, você pode anexar um scrollmanipulador de eventos a qualquer elemento HTML. No entanto, para rastrear o deslocamento da rolagem, você usa scrollTope scrollLeftem vez de scrollXe scrollY.
A scrollToppropriedade define ou obtém o número de pixels em que o conteúdo do elemento é rolado verticalmente. A scrollLeftpropriedade obtém e define o número de pixels que o conteúdo de um elemento é rolado a partir de sua borda esquerda.
O exemplo a seguir mostra como tratar o scrollevento do divelemento com o id scrollDemo:
<!DOCTYPE html>
<html>
<head>
<title>JS Scroll Events</title>
<style>
#scrollDemo {
height: 200px;
width: 200px;
overflow: auto;
background-color: #f0db4f
}
#scrollDemo p {
/* show the scrollbar */
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<div id="scrollDemo">
<p>JS Scroll Event Demo</p>
</div>
<div id="control">
<button id="btnScrollLeft">Scroll Left</button>
<button id="btnScrollTop">Scroll Top</button>
</div>
<script>
let control = document.querySelector('#control');
control.addEventListener('click', function (e) {
// get the scrollDemo
let div = document.getElementById('scrollDemo');
// get the target
let target = e.target;
// handle each button's click
switch (target.id) {
case 'btnScrollLeft':
div.scrollLeft += 20;
break;
case 'btnScrollTop':
div.scrollTop += 20;
break;
}
});
</script>
</body>
</html>
Linguagem de código: HTML, XML ( xml )As melhores maneiras de lidar com os eventos de rolagem
Muitos scrolleventos são acionados enquanto você rola uma página ou um elemento. Se você anexar um ouvinte de evento ao scrollevento, o código no manipulador de eventos precisará de tempo para ser executado.
Isso causará um problema conhecido como scroll jank. O efeito de rolagem irregular causa um atraso para que a página não pareça ancorada em seu dedo.
Limitação de eventos
É muito melhor manter o scrollmanipulador de eventos leve e executá-lo a cada N milissegundos usando um cronômetro. Então, em vez de usar o seguinte código (e você nunca deve usá-lo):
window.scroll = () => {
// place the scroll handling logic here
};
Linguagem de código: JavaScript ( javascript )Você deve usar o seguinte código:
let scrolling = false;
window.scroll = () => {
scrolling = true;
};
setInterval(() => {
if (scrolling) {
scrolling = false;
// place the scroll handling logic here
}
},300);
Linguagem de código: JavaScript ( javascript )Como funciona:
- Primeiro, defina o
scrollingsinalizador comofalse. Se oscrollevento for acionado, defina oscrollingsinalizador paratruedentro doscrollmanipulador de eventos. - Em seguida, execute o
scrollmanipulador de eventos usando asetInterval()cada 300 milissegundos se osscrolleventos tiverem sido disparados.
Essa maneira de lidar com o scrollevento é chamada de otimização de evento , que acelera onscrolla operação subjacente de um a cada 300 milissegundos. A limitação diminui a taxa de execução do manipulador de eventos de rolagem.
Eventos passivos
Recentemente, os navegadores da Web modernos suportam eventos passivos para eventos de entrada como scroll, touchstart, wheel, etc. Ele permite que o thread da UI manipule o evento imediatamente antes de passar o controle para o seu manipulador de eventos personalizado.
Nos navegadores web que suportam eventos passivos, você precisa adicionar o passivesinalizador a qualquer ouvinte de evento que não chame preventDefault(), assim:
document.addEventListener(
'scroll',
(event) => {
// handle scroll event
},
{ passive: true }
);
Linguagem de código: JavaScript ( javascript )Sem a passiveopção, o código no manipulador de eventos sempre será invocado antes que o thread da UI execute a rolagem.
Confira quais navegadores suportam eventos passivos aqui .
Resumo
- O
scrollevento é acionado quando você rola uma página da web ou um elemento. - Para uma página, as propriedades
scrollXescrollYretornam o número de pixels que o documento está atualmente rolando horizontal e verticalmente. - Para um elemento, as propriedades
scrollTopescrollLeftdefinem ou obtêm o número de pixels em que o conteúdo do elemento é rolado verticalmente e rolado a partir de sua borda esquerda. - Use a técnica de otimização de eventos para lidar melhor com os eventos de rolagem. Em navegadores modernos, você pode usar ouvintes de eventos passivos.
