Parallax scroll distance

[Oriole-Alex]

Hi,

I'm trying to track the scroll distance with parallax, so I can link animations to progress, however I can't access a pageYOffset or anything similar. Console logging ref.current.container.current or ref.current.content both provide only a single response at page launch but nothing further like a normal scroll eventlistener.

any help would be massively appreciated!

[kindoflew]

hi! two things going on here:

first, you're scrolling a div container, so it doesn't have a pageYOffset. you'd be looking for scrollTop.

And second, you would have to add an event listener to ref.current.container.current:

const [scroll, setScroll] = useState(0)
const parallax = useRef(null)

useEffect(() => {
  const getScroll = (e) => {
    setScroll(e.target.scrollTop)
  }
  const container = parallax.current.container.current
  container.addEventListener('scroll', getScroll)

  return () => {
    container.removeEventListener('scroll', getScroll)
  }
}, [])

return (
  <Parallax ref={parallax}>
    <ParallaxLayer>
      <p>I've scrolled {scroll} pixels</p>
    </ParallaxLayer>
  </Parallax>
)