Ejemplo de mi sitio web: Ejemplo de mi sitio web

Hola, estoy tratando de descubrir cómo agregar una animación de revelación al desplazarse con el elemento (no con toda la página). Porque configuré la root background image en 100vh y solo uso un elemento (desbordamiento) para desplazarlo verticalmente, de modo que no estoy desplazando una página completa, solo el componente de una página. Por ejemplo, este es mi código de ejemplo App.js:

 import React from 'react' import {Header, Page, Footer} from "./Hooks" import './style.css' function App(){ return ( <div className="App"> <Header/> -> this one is a fixed component. <Page/> -> this one can scroll vertically. <Footer/> -> this one is a fixed component. </div> ); };

Y este es el código style.css:

 .App{ background-image: './macos'; height: 100vh; width: 100%; overflowY: auto; }

Debido a esta configuración, no puedo usar la función window.scrollTo(0,0) para desplazarme hasta la parte superior. Y voy a crear la animación de revelación, pero no sé cómo hacer que funcione. Vi un video sobre un evento onScroll pero no puede funcionar en mi sitio web debido al componente de la Page , porque el sitio web no se desplaza, solo el main page component , por lo que window.ScrollY o window.ScrollX siempre se establece en cero (0,0) (comprobado por console.log() ).

No sé cómo solucionar esto o utilizar cualquier tipo de método. Es difícil volver a crear la interfaz de usuario de la página raíz, así que no quiero tener problemas con ella. Gracias por todas sus contribuciones. Cualquiera que responda recibirá mi voto a favor.