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>

PsiKai · Accepted Answer · 2022-03-06 16:46:11Z

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>

edited Mar 6, 2022 at 16:46

answered Mar 6, 2022 at 16:29

PsiKai

1,9861 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PsiKai Over a year ago

I had a typo, it's fixed now. It's the same answer as above, so no biggie

James · Accepted Answer · 2022-03-06 16:40:50Z

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>

Collectives™ on Stack Overflow

Javascript scroll event simple animation

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related