Estou querendo girar alguns elementos na rolagem. Quero que eles girem começando de 0 graus e então adicionem ou subtraiam 25 graus (ou qualquer outro número) ao valor atual do grau em cada evento de rolagem para cima/baixo.
Aqui está o que eu tenho. Funciona na primeira rolagem, mas depois o valor não é atualizado na rolagem para cima ou para baixo. O que estou esquecendo?
const elem = document.querySelectorAll(".rotator");
window.addEventListener("scroll", function () {
elem.forEach((el) => {
let lastScrollTop = 0;
let value = 0;
let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// Scroll down
value += 25;
} else if (st < lastScrollTop) {
// Scroll up
value -= 25;
}
el.style.transform = `rotate(${value}deg)`;
})
})
.rotator {
height: 50px;
width: 50px;
background-color: lightgreen;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 1000px;
}
<h1>Keep rotating on scrolling up or down</h1>
<div class="rotator">Rotate</div>
<div class="rotator">Rotate</div>
Você continua redefinindo os valores
0
em cada iteração. Mova a declaração para fora dos loops.Você também nunca está definindo
lastScrollTop
, então eu adicionei umlastScrollTop = st;
Pequeno exemplo usando o evento wheel, onde você pode verificar
event.deltaY
a direção da rolagem e adicioná-la ao valor.