Getting the scroll position of Parallax

[FormidablePencil]

adding a an event listener scroll to window is pointless because the Parallax element scrolls and not the window itself. Therefore console logging window's scroll position doesn't work and so I was wondering how I am to get the scroll position within parallax so that I could add a few spring animations on scroll within parallax.

[michaelwachell]

+1

[aleclarson]

Please add example code of the API you're expecting, if you can. Thanks 👍

[g0byungsoo]

+1

[HERMESMATEUS]

+1
I need to get the position of the pages.
Please if someone get the code how to do it please share the code thanks, because i have the same problem

[michaelwachell]

Ended up implementing a useOnScreen hook (per the link) that returns a boolean when content is visible. Works a charm for triggering animations (although still doesn't give you scroll position or offset).

https://usehooks.com/useOnScreen/

[HERMESMATEUS]

Ended up implementing a useOnScreen hook (per the link) that returns a boolean when content is visible. Works a charm for triggering animations (although still doesn't give you scroll position or offset).

https://usehooks.com/useOnScreen/

sorry can you help me with a little example, currently my code is similar to this but it doesn't work

----
imports .....
....
------ 

function useOnScreen(ref, rootMargin = '-300px') {
    .....
   code the same as in the example https://usehooks.com/useOnScreen/
    ....
    return isIntersecting;
}

export default function ExtendsBody({ open, handleClose }) {
     const reff = React.useRef();
     let RefParallax = null;
     const onScreen = useOnScreen(reff, '0px');
    return  <Parallax ref={ref => RefParallax = ref} pages={7}>
            <div>
                <div style={{ height: '100vh' }}>
                    <h1>Scroll down to next section 👇</h1>
                </div>
                <div
                    ref={reff}
                    style={{
                        height: '100vh',
                        backgroundColor: onScreen ? '#23cebd' : '#efefef'
                    }}
                >
                    {onScreen ? (
                        <div>
                            <h1>Hey I'm on the screen</h1>
                            <img src="https://i.giphy.com/media/ASd0Ukj0y3qMM/giphy.gif" />
                        </div>
                    ) : (
                            <h1>Scroll down 300px from the top of this section 👇</h1>
                        )}
                </div>
            </div>
            <TheyTrustUs onPress={(page) => RefParallax.scrollTo(page)} />
        </Parallax>
}

export function TheyTrustUs({ onPress }) {
    return <>
        <ParallaxLayer onClick={() => onPress(6)} offset={5} speed={0.2} style={{ backgroundColor: '#f6f6f7', display: 'flex', justifyContent: 'center' }}>
           <div>
                ......
           </div>
        </ParallaxLayer>
    </>
}

[michaelwachell]

const useOnScreen = (ref = (<div />), rootMargin = '40px', threshold = 1) => {
  // State and setter for storing whether element is visible
  const [isIntersecting, setIntersecting] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        // Update our state when observer callback fires
        setTimeout(() => setIntersecting(entry.isIntersecting), 0);
        // setIntersecting(entry.isIntersecting);
      },
      {
        rootMargin,
        threshold,
      },
    );
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, []); // Empty array ensures that effect is only run on mount and unmount
  return isIntersecting;
};

export default useOnScreen;

That's how I implemented the hook (the timeout is just playing with delay). You might want to keep the div separate from your actual functional HTML and make it smaller than the entire viewHeight. <div ref={reff} /> . Try popping that somewhere convenient.

[FormidablePencil]

Thx @michaelwachell.

[starcrest]

@michaelwachell's code is great for determining onScreen, but I'd still love to get the actual scroll position. (I had some UI logic built around window.pageYOffset, and I'm trying to drop in react-spring parallax without breaking.) Any help appreciated.

[2000prcs]

I want to implement a feature that if I scroll down the page -> the nav bar hides and scroll up -> the nav bar shows up again. And I need to know window.pageYOffset value to achieve this feature. Please help!

[kindoflew]

It isn't documented (because it's only used internally) but you can get the current scroll position using a ref and access it with ref.current.current.

The issue is that Parallax doesn't re-render when it's state is changed, so React doesn't "know" that ref.current.current has updated.

A sort of hacky way around it is giving Parallax a className and then setting up a scroll listener on the container:

...
const parallax = useRef();

const handleScroll = () => {
  if (parallax.current) {
    console.log(parallax.current.current)
  }
}

useEffect(() => {
  const container = document.querySelector('.my-class-name')
  container.addEventListener('scroll', handleScroll)
  return () => {
    container.removeEventListener('scroll', handleScroll)
  }
}, [])

return (
  <Parallax ref={parallax} className='my-class-name'>
...

-- Obligatory warning that it is internal and therefore subject to change. --

[lucaspbordignon]

Complementing @kindoflew, we seem to have a piece in the documentation explaining we can attach such listeners via ref.current.container

Because Parallax is a scrollable container all scroll events are fired from the container itself therefore, listening for scroll on window won't work. However, if you want to attach additional events you can use ref.current.container

For reference - https://www.react-spring.dev/docs/components/parallax#usage

[AmalFrancisOlakengil]

@kindoflew Bro I can't express how much Thankful I am to you, I have been using chatgpt, gemini, reading stackoverflows no one gave me a answer. even react springs documentation didnt show atleast a example for it. Ur a lifesaver.

[henriquepcm]

useEffect(() => {
  const container = document.querySelector('.my-class-name')
  container.addEventListener('scroll', handleScroll)
  return () => {
    container.removeEventListener('scroll', handleScroll)
  }
}, [])

Instead of:
const container = document.querySelector('.my-class-name')

I used:
const container = document.getElementById('my-class-name')

Using the class was creating a scrollbar in the middle of the screen.

Thanks for the solution @kindoflew!