Javascript scroll event simple animation

Question

I want the square to be yellow with each scroll down, and the square to be green with each scroll up. This snippet works almost the way I want it to, because what I want happens only when the square is no longer fully visible on the viewport. I would like the scroll down to be yellow and the scroll up to be green.

 const square = document.querySelector('.square'); const squarePos = square.getBoundingClientRect().top; console.log(squarePos); window.addEventListener('scroll',mouse=>{ const scrollTop = window.scrollY; if (scrollTop >squarePos) { square.style.background = "yellow"; } else{ square.style.background = "green"; } });

 .square{ width:100px; height:100px; position:relative; margin:0 auto; background:red; top:200px; }.content{ width:100vw; height:150vh; }

 <div class = 'square'></div> <div class = 'content'></div>

Answer 1

You need to compare your squarePos with the previous square pos, not the client y. Set the position with let, and update the value after each event listener callback.

 const square = document.querySelector('.square'); let squarePos = square.getBoundingClientRect().top; window.addEventListener('scroll', mouse => { if (square.getBoundingClientRect().top > squarePos) { square.style.background = "yellow"; } else{ square.style.background = "green"; } squarePos = square.getBoundingClientRect().top; });

 .square{ width:100px; height:100px; position:relative; margin:0 auto; background:red; top:200px; transition: background 200ms ease; }.content{ width:100vw; height:150vh; }

 <div class = 'square'></div> <div class = 'content'></div>

Answer 2

Maybe something like this?

The idea is get the previous scroll location (y) and compare to the current scroll location.

If the previous is bigger, then, it scroll up, otherwise scroll down

 const square = document.querySelector('.square'); const squarePos = square.getBoundingClientRect().top; let oldpos = 0; window.addEventListener('scroll', mouse => { const scrollTop = window.pageYOffset; if (scrollTop > oldpos) { square.style.background = "yellow"; } else { square.style.background = "green"; } oldpos = scrollTop });

 .square { width: 100px; height: 100px; position: relative; margin: 0 auto; background: red; top: 200px; }.content { width: 100vw; height: 150vh; }

 <div class='square'></div> <div class='content'></div>