Así que aquí está el código y quiero obtener el objeto de evento de desplazamiento en el desplazamiento de div cuyo contenido es mucho para que div se pueda desplazar cómo podemos obtener el evento de desplazamiento y por qué no funciona
import React from "react"; function App() { return ( <div onScroll={(e) => console.log(e)}> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, facilis magni d....... ............... vero! </div> ); } export default App;no estoy seguro si desea hacer que el elemento se pueda desplazar por sí mismo o simplemente desea que la aplicación se consuela. Registre el objeto cada vez que se desplace por la página...
pero si desea consolar. registrar el objeto de todos modos, intente adjuntar un detector de eventos al documento como este ...
tenga en cuenta que necesita obtener getBoundingClientRect() para saber si la pantalla está en el elemento que desea
function scroll() { const element = document.querySelector("div") const rect = element.getBoundingClientRect() if( rect.top <= 200 )//any number above 100 will work {console.log("scrolled")} } document.addEventListener('scroll', scroll);de esta manera, cada vez que desplace la ventana sobre el elemento, la función de desplazamiento funcionará, espero que lo ayude
Su problema es que no está desplazando su div que tiene onScroll on (desde su enlace en los comentarios, ese es el div de pagesContainer ), sino que está desplazando todo su cuerpo. Es más fácil ver si agrega otro elemento debajo de su onScroll div, ya que verá que el contenido cambia a medida que se desplaza. En el ejemplo reproducible que compartió, su div .pagesContainer es 500vw, por lo que debe desplazarse por el contenedor de ese div (es decir, el cuerpo) para ver el contenido. En cambio, desea mantener .pagesContainer del ancho de su pantalla (es decir, 100vw ) pero hacer que cada página ( .pages ) dentro del contenedor de su div abarque el 100% de ese ancho (esto se puede hacer usando flex: 0 0 100%; , ver aquí ). De esta manera, tendrás elementos dentro de tus pagesContainer div "desbordando" su ancho. Debe asegurarse de agregar overflow-x: scroll; al padre para especificar que debe agregar una barra de desplazamiento cuando el contenido se desborda en lugar de representarlo fuera del contenedor.
Vea el ejemplo a continuación (ver la consola del navegador para ver los registros):
function App() { return ( <div className="pagesContainer" onScroll={(e) => console.log("scroll")}> <div className="pages">page1</div> <div className="pages">page2</div> <div className="pages">page3</div> <div className="pages">page4</div> <div className="pages">page5</div> </div> ); } ReactDOM.render(<App />, document.body); body { margin: 0; /* just to remove whitespace padding */ } .pagesContainer { display: flex; width: 100vw; /* change to 100vw*/ overflow-x: scroll; /* important to specify scrolling behaviour when the content overflows */ } .pages { flex: 0 0 100%; /* make each page 100% of the container */ height: 100vh; } .pages:nth-child(even) { background-color: rgb(225, 143, 143); } .pages:nth-child(odd) { background-color: rgb(130, 130, 215); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>