I have several SVGs which I combine vertically sort of like this:

<svg-clouds/>
<svg-flat-color/>
<svg-mountain/>
<svg-flat-color/>
<svg-trees/>
<svg-flat-color/>

The "flat-color" sections are where I put content. Now, the flat color isn't entirely flat, it has some texture to it, but it is just devoid enough of stuff so text looks good on it, while the other stuff (clouds, etc.) are more texture rich.

I would like to scroll through the SVG set, and at the same time scroll through my content set which might look like this:

<header>
  <h1>...</h1>
  <p>...</p>
  <div>...</div>
</header>
<section>
  <h2>...</h2>
  <p>...</p>
  <div>...</div>
</section>
<section>
  <h2>...</h2>
  <p>...</p>
  <div>...</div>
</section>
...

I would like for each section to be shown only in the visible portions of the SVGs. How can I do that? I am using React if that matters.

I have been struggling all weekend trying to get it working (with React and Next.js, using refs and hooks galore). Basically what I tried is to render each <svg-flat-color> with corresponding content, like:

<div class='container'>
  <svg-flat-color/>
  <section>...content...</section>
</div>

I then tried to position both absolutely, with the container having overflow-y: auto, sort of thing. Then as you scroll through the SVG background, you calculate how much content is to be shown with clientHeight and scrollHeight, and figure out how to adjust the scrollTop of the content appropriately. That took me hours to tinker with and I still didn't get it right, just for one container.

But then I want the whole thing (multiple containers, like 10 flat sections) to work like this. My approach breaks down. Instead it seems I need to have a global SVG background with the content global too, in two layers, and then calculate the total possible scrollable space somehow from the content, and go from there. But I am a bit lost. Can you show how to accomplish this sort of thing?