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

Question

我正在使用 React Spring Parallax 构建粘性滚动部分，请在此处查看我的演示： https://codesandbox.io/s/parallax-sticky-scroll-2zd58

目前，除了通过单击按钮触发 scrollTo() 之外，此演示正在按我的需要运行。 我想在用户向上或向下滚动时触发 scrollTo function，但是，我不知道如何在反应功能组件中实现 onScroll。

我在这里查看了以下问题，但它们没有满足我的问题： onScroll in React 功能组件onScroll React cannot trigger

Answer 1

您所需要的只是将滚动更改为真实。 我想这就是你所需要的

像这样：

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

这是你之前的代码

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

更新

至于要讨论的可能是这就是你想要实现的。

此处基于 ParallaxLayer 的文档中没有 onScroll 道具React-Spring 。 所以我认为你需要制作一个 function 来监听浏览器中的滚动活动，就像这个示例一样。 希望它可以帮助你。

...

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>
  );
};

...

这是示例的沙箱

Codesandbox - react-parallax Scroll Listen