如何在功能性 React 组件中触发 onScroll

Question

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

Answer 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