I’m looking to rotate some elements on scroll. I want them to rotate starting from 0 degrees and then add or substract 25 degrees (or any other number) to the current degree value on each scroll up/down event.
Here’s what I have. It works on first scroll, but then the value is not updated on scroll up or down.
What am I missing?
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>
>Solution :
You keep resetting the values’s to 0 in every iteration. Move the declaration outside the loops.
You’re also never setting lastScrollTop, so I;ve added an
lastScrollTop = st;
let value = 0;
let lastScrollTop = 0;
const elem = document.querySelectorAll(".rotator");
window.addEventListener("scroll", function () {
elem.forEach((el) => {
let st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
// Scroll down
value += 25;
} else if (st < lastScrollTop) {
// Scroll up
value -= 25;
}
lastScrollTop = st;
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>Small example using wheel event where you can check the event.deltaY to see the scroll direction and append that to the value.
let value = 0;
const elem = document.querySelectorAll(".rotator");
window.addEventListener("wheel", function (ev) {
elem.forEach((el) =>
el.style.transform = `rotate(${value += (ev.deltaY < 1) ? 25 : -25}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>