如何使用 react-rellax-wrapper 停止视差React，Rellax

如何解决如何使用 react-rellax-wrapper 停止视差React，Rellax

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

这是我的代码：https://codesandbox.io/s/simple-rellax-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,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,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>
  );
}

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

如果使用 rellax-wrapper 库无法做到这一点，您有替代品吗？