React-spring: Getting the scroll position of Parallax

Created on 18 Jul 2020 · 9Comments · Source: pmndrs/react-spring

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.

question

Source

FormidablePencil

All 9 comments

michaelwachell on 22 Jul 2020

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

aleclarson on 23 Jul 2020

g0byungsoo on 27 Jul 2020

+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

HERMESMATEUS on 29 Jul 2020

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/

michaelwachell on 30 Jul 2020

👍1

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>
    </>
}

HERMESMATEUS on 4 Aug 2020

```import React, { useState, useEffect } from 'react';

const useOnScreen = (ref = (

), 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.

michaelwachell on 9 Sep 2020

👍1

Thx @michaelwachell.

FormidablePencil on 18 Sep 2020

@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.