Tengo varios SVG que combino verticalmente de esta manera:

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

Las secciones de "color plano" son donde pongo el contenido. Ahora, el color plano no es completamente plano, tiene algo de textura, pero está lo suficientemente desprovisto de cosas para que el texto se vea bien en él, mientras que las otras cosas (nubes, etc.) son más ricas en textura.

Me gustaría desplazarme por el conjunto de SVG y, al mismo tiempo, desplazarme por mi conjunto de contenido, que podría verse así:

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

Me gustaría que cada sección se muestre solo en las partes visibles de los SVG. ¿Cómo puedo hacer eso? Estoy usando React si eso importa.

He estado luchando todo el fin de semana tratando de que funcione (con React y Next.js, usando refs y hooks en abundancia). Básicamente, lo que intenté es representar cada <svg-flat-color> con el contenido correspondiente, como:

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

Luego traté de posicionar ambos absolutamente, con el contenedor teniendo overflow-y: auto , algo así. Luego, a medida que se desplaza por el fondo SVG, calcula la cantidad de contenido que se mostrará con clientHeight y scrollHeight y descubre cómo ajustar el scrollTop del contenido de manera adecuada. Me tomó horas jugar con eso y todavía no lo hice bien, solo para un contenedor.

Pero luego quiero que todo (múltiples contenedores, como 10 secciones planas) funcione así. Mi enfoque se rompe. En cambio, parece que necesito tener un fondo SVG global con el contenido global también, en dos capas, y luego calcular el espacio desplazable total posible de alguna manera a partir del contenido, y continuar desde allí. Pero estoy un poco perdido. ¿Puede mostrar cómo lograr este tipo de cosas?