javascript detect scrolling past the end of the window when scroll event doesn’t fire

I have a site in which all sections take 100vh/vw, and I want to animate the opacity transition when user attempts to scroll up/down.

The thing is, the scroll event doesn’t fire because the window hasn’t really scrolled.

here’s the codepen, and the gist of it:

// css
.section {
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.5s;
}

.section.active {
  opacity: 1;
}

// html
<div className="section active">Some stuff here...</div>
<div className="section">Some stuff here...</div>

// js
window.addEventListener("scroll", () => {
  console.log("never fires")
})

is this even possible?

And if not, any ideas for a workaround?

Answer

Change keyword scroll to wheel, this event fires when you try to scroll from mouse/pad(using fingers)even there is not scroll

window.addEventListener("wheel", () => {
  console.log("event fires")
})