React-Spring - 由于高度限制而合并导航和页脚的视差问题

Question

我正在使用react-spring 中的视差来创建视差效果。我知道可以使用其父级的高度来设置其面积。然而，此解决方案在滚动时通过保持 和 在屏幕上可见而导致奇怪的行为。我在这里有几个问题：

1. 我怎样才能以正常的方式设置这个布局？
2. 我是否需要将 和 放置在具有固定高度的 ParallaxComp 内部（我希望有更好的解决方案）？
3. 有没有办法根据里面的内容来假设其高度，而不是使用道具因子？

先感谢您。

代码沙箱

应用程序.js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

视差Comp.js

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

let parallax;

const ParallaxComp = () => {
  return (
    <Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
      <ParallaxLayer
        offset={0}
        speed={0.1}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#fec70e"
          />
        </svg>
      </ParallaxLayer>
      <ParallaxLayer
        offset={0}
        speed={-0.4}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#037e36"
          />
        </svg>
      </ParallaxLayer>
    </Parallax>
  );
};

export default ParallaxComp;