Is there a way to detect the scrolling direction in ReactJS with Framer Motion when the div is not scrollable?

I am attempting to replicate the effect that buttons are achieving when users scroll the mouse in the given program

import {useState, useEffect} from 'react';
import {motion} from 'framer-motion'

function Page({bgColor="red", isVisible, isDown}){
  return(
    <motion.div
      style={{ 
        height: '90vh',
        width: "100%",
        backgroundColor: bgColor,
        position: 'absolute',
      }}
      animate={{opacity: isVisible ? 1 : [1,0,0], y: isVisible ? 0 : isDown?[0,90, 180, 0]:[0,-90,-180, 0]}}
      transition={{delay: isVisible ? 0.15 : 0, duration: 0.5}}
    >
    </motion.div>
  )
}

function App(){
  const [currentPage, setCurrentPage] = useState(0);
  const [isScrollDirectionUp, setIsScrollDirectionUp] = useState(true)
  
  

  const pagesArr = [
    <Page bgColor={'blue'} isVisible={currentPage===0} isDown={isScrollDirectionUp}/>,
    <Page bgColor={'orange'} isVisible={currentPage===1} isDown={isScrollDirectionUp}/>,
    <Page bgColor={'green'} isVisible={currentPage===2} isDown={isScrollDirectionUp}/>,
    <Page bgColor={'red'} isVisible={currentPage===3} isDown={isScrollDirectionUp}/>
  ]

  function nextPageButtonHandler(){
    var newPageno = (+(currentPage)+1)%pagesArr.length;
    setIsScrollDirectionUp(false)
    setCurrentPage(newPageno);
  }

  function prevPageButtonHandler(){
    var newPageno = +(currentPage) - 1;
    if(newPageno<0){
      newPageno = pagesArr.length - 1;
    }
    setIsScrollDirectionUp(true)
    setCurrentPage(newPageno);
  }

  return (
    <div>
      <div style={{position:"fixed",zIndex:"3"}}>
        <button onClick={prevPageButtonHandler} >prev page</button>
        <button onClick={nextPageButtonHandler} >next page</button>
      </div>

      {pagesArr.map((Page)=>{
        return Page
      })}
      
    </div>
  );
}
export default App;

In this program there are four divs(3 transparent and 1 visible) stacked on top of each other. when “prev page” or “next page” button is click the page appearing to the user changes with an animation. the page that was first visible starts moving up and getting transparent, side by side other page start appearing, then the page that was moving up, after getting transparent, moves down back to the original position. This results in effect of moving to the next page.

I attempted to implement the described animation using “scroll” event listener in javascript, but unfortunately, it does not work for the unscrollable div elements(elements will be unscrollable).

function handleScrolling(event){
    console.log(event);
  }
  
  useEffect(()=>{
    window.addEventListener('scroll', handleScrolling);
    return(()=>{
      window.removeEventListener('scroll', handleScrolling)
    })
  },[])

The program should detect the scroll and change the states: setCurrentPage and setIsScrollDirectionUp.

I would appreciate any guidance or suggestions on how to address this issue and make the animation work when mouse is scrolled