Getting the scroll position of Parallax #1088

Activity

1. FormidablePencil

   added

   question

   on Jul 18, 2020
2. michaelwachell commented on Jul 22, 2020

   

   michaelwachell

   on Jul 22, 2020

   More actions

   +1
3. aleclarson commented on Jul 22, 2020

   

   aleclarson

   on Jul 22, 2020

   Contributor

   More actions

   Please add example code of the API you're expecting, if you can. Thanks 👍
4. g0byungsoo commented on Jul 27, 2020

   

   g0byungsoo

   on Jul 27, 2020

   More actions

   +1
5. HERMESMATEUS commented on Jul 29, 2020

   

   HERMESMATEUS

   on Jul 29, 2020

   Last edited by HERMESMATEUS

   More actions

   +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
6. michaelwachell commented on Jul 29, 2020

   

   michaelwachell

   on Jul 29, 2020

   More actions

   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/

   👍React with 👍1Reacted by Dennis Aleksandrov
7. HERMESMATEUS commented on Aug 4, 2020

   

   HERMESMATEUS

   on Aug 4, 2020

   Last edited by HERMESMATEUS

   More actions

   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>
       </>
   }
   
   
   
8. michaelwachell commented on Sep 9, 2020

   

   michaelwachell

   on Sep 9, 2020

   Last edited by michaelwachell

   More actions

   
   
   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.

   👍React with 👍1Reacted by Dennis Aleksandrov
9. FormidablePencil commented on Sep 18, 2020

   

   FormidablePencil

   on Sep 18, 2020

   Author

   More actions

   Thx @michaelwachell.
10. FormidablePencil

    closed this as completedon Sep 18, 2020
11. starcrest commented on Oct 29, 2020

    

    starcrest

    on Oct 29, 2020

    More actions

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

    👍React with 👍2Reacted by straydrop411 - 54yd and Moyeong Lee (Mo)
12. aleclarson

    reopened this on Oct 29, 2020
13. 2000prcs commented on Feb 13, 2021

    

    2000prcs

    on Feb 13, 2021

    More actions

    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!
14. joshuaellis

    closed this as completedon Mar 18, 2021
15. pmndrs

    locked and limited conversation to collaborators on Mar 18, 2021