Execute event listener only once with scroll

Question

I have an event listener for an image that fades in on scroll down, and i want it to stop reappearing on scroll up.

Here is my code, would you be able to help me with that?

const checkpoint = 100;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= checkpoint) {
    opacity = 1 - currentScroll / checkpoint;
  } else {
    opacity = 0;
  }
  document.querySelector(".front").style.opacity = opacity;
});

Thanks in advance

In the absence of a working snippet, can you explain exaclty the behaviour you seek. Is the image to disappear from view and not return on any scroll? return on a furture down scroll? Something else? — Dave Pritlove
– Dave Pritlove, Commented May 1, 2022 at 13:42
I just wanted it to appear once and never return, thanks anyway — Maximilien Ollier
– Maximilien Ollier, Commented May 1, 2022 at 13:50

Aneesh · Accepted Answer · 2022-05-01 13:40:40Z

2

Based on your own condition of currentScroll <= checkpoint, this should stop the opacity from changing (i.e. stop the image from reappearing) once it has been set to 0

let checkpoint = 100;

window.addEventListener("scroll", () => {
  const currentScroll = window.pageYOffset;
  if (currentScroll <= checkpoint) {
    opacity = 1 - currentScroll / checkpoint;
  } else {
    opacity = 0;
    checkpoint = -1;
  }
  document.querySelector(".front").style.opacity = opacity;
});

answered May 1, 2022 at 13:40

Aneesh

1,7256 silver badges14 bronze badges

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

1 Comment

Maximilien Ollier Over a year ago

That's it, exactly what i needed, thanks a lot

Not A Robot · Accepted Answer · 2024-11-18 06:57:29Z

0

window.addEventListener("scroll", function(e) {
      
},{once:true});

edited Nov 18, 2024 at 6:57

Not A Robot

2,7002 gold badges20 silver badges37 bronze badges

answered Nov 18, 2024 at 6:54

Rahul Dhiman

298 bronze badges

Collectives™ on Stack Overflow

Execute event listener only once with scroll

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