0

I am using React Spring Parallax to build sticky scrolling sections, see my demo here: https://codesandbox.io/s/parallax-sticky-scroll-2zd58

Currently, this demo is functioning how I need it to except for the scrollTo() being triggered by clicking the button. I want to trigger the scrollTo function when a user scrolls up or down, however, I can not figure out how to implement onScroll in react functional components.

I've looked at the following questions here but they did not satisfy my issue: onScroll in React functional component onScroll React cannot trigger

whoMe
  • 227
  • 2
  • 13
  • I am basically going for this type of functionality while using the parallax effect: https://css-tricks.com/practical-css-scroll-snapping/ Although, I have not been able to get this CSS working so I am attempting the solution I mention in my original question. – whoMe Dec 17 '20 at 19:42

1 Answers1

1

all you need is change scrolling to be true. I think that's all you need

like this :

<Parallax scrolling={true} pages={3} ref={(ref) => (parallax = ref)}>
  {/* Franchise Sections   */}
  <FranchiseSection offset="0" bg="red" />
  <FranchiseSection offset="1" scrollTo="2" bg="blue" />
  <FranchiseSection offset="2" scrollTo="3" bg="green" />

  <FranchiseContent offset="0" scrollTo="1" />
  <FranchiseContent offset="1" scrollTo="2" />
  <FranchiseContent offset="2" scrollTo="0" />
</Parallax>

this your code before

<Parallax scrolling={false} pages={3} ref={(ref) => (parallax = ref)}>
....

UPDATED

as to be discussed may be this is what you want to achieve.

There's no onScroll props in ParallaxLayer based Documentation here React-Spring. So i think you need to make a function to listen scroll activity in the browser like this sample. hope it can help you.

...

const FranchiseSection = (props) => {
  const handleScrollTo = () => {
    console.log("scrolled");
  };

  React.useEffect(() => {
    if (props.offset) {
      window.addEventListener("scroll", handleScrollTo);
    }
    return function cleanup() {
      if (props.offset) {
        window.removeEventListener("scroll", handleScrollTo);
      }
    };
  });

  return (
    <div className="franchise-section">
      <ParallaxLayer
        offset={props.offset}
        speed={0}
        style={{ backgroundColor: `${props.bg}` }}
      >
        {props.children}
      </ParallaxLayer>
    </div>
  );
};

...

This is the sandbox for sample

Codesandbox - react-parallax Scroll Listen

darkscripter
  • 425
  • 5
  • 9
  • That does not solve my issue. I don't want the user to freely scroll, I want each section to be 'sticky' like it is in my demo. I basically want to override the normal scrolling functionality by setting scrolling to false and triggering the scrollTo function to take you to the next section. That is how my demo is working right now except it triggers on button click and not when the user scrolls. My question is: How can I use onScroll in a functional component. I appreciate your input, thank you! – whoMe Dec 17 '20 at 19:35
  • I don't get it, tell me more. so you want to move to the next section with button (just like your sample), but user can scroll in recent section? or you want to expand the section (so user can scrolling) and until exact right offset, section will be moved to the next? which one? – darkscripter Dec 17 '20 at 19:44
  • My demo scrolls to the next section when you click the button. I did that just as an example of how the scrolling should animate. However, I want to completely eliminate the button and use a scroll event listener to trigger scrollTo() so it animates to the next section. The goal is to have 'snap to' sections like this: https://css-tricks.com/practical-css-scroll-snapping/ If you check my demo again, at line 14 I try to console log when a user scrolls but I can't get it to trigger - thats basically my only question, how do i get onScroll to trigger – whoMe Dec 17 '20 at 20:00
  • Yeah i see it,. no onScroll props in ParallaxLayer based on react spring documentation, just onClick [link](https://www.react-spring.io/docs/props/parallax). let me update my answer. – darkscripter Dec 17 '20 at 20:48