reactjs - 如何使用 react-relax-wrapper 停止视差（React，Rellax）

Question

我正在使用 react-relax-wrapper 做一些视差动画。我正在寻找停止动画并在窗口中不可见时将其重置。在 rellax.js 库的文档中，您可以使用 rellax.refresh(); 和 rellax.destroy(); 方法，但是由于我使用的是包装器版本，因此我不确定如何执行此操作。

这是我的代码：https ://codesandbox.io/s/simple-relax-wrapper-4koe8

import "./styles.css";
import RellaxWrapper from "react-rellax-wrapper";
export default function App() {
  return (
    <div className="App">
      <div // i should run first, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(40,40,40)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
      <div // i should run second, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(60,60,60)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
      <div // i should run third, and stop running when im not visible
        style={{
          overflow: "hidden",
          height: "100vh",
          width: "100%",
          backgroundColor: "rgb(80,80,80)"
        }}
      >
        <RellaxWrapper speed={1} percentage={1}>
          <p>Test1</p>
        </RellaxWrapper>
        <RellaxWrapper speed={2} percentage={2}>
          <p>Test2</p>
        </RellaxWrapper>
        <RellaxWrapper speed={3} percentage={3}>
          <p>Test3</p>
        </RellaxWrapper>
      </div>
    </div>
  );
}

当滚动位置低于其容器时，第一个放松 div 应该停止运行，当滚动位置高于其容器时，最后一个放松 div 应该停止运行。

如果 rellax-wrapper 库无法做到这一点，你有任何替代品吗？

标签： reactjsparallax