0
247
Views¿Cómo puedo encontrar la posición de desplazamiento actual de un gráfico en Javascript?
Tengo un gráfico que es desplazable
Estoy tratando de activar una función cuando el usuario ha llegado al final de la tabla bordeada en rojo.
El enfoque que tomé es encontrar la altura del gráfico que es 1520px.
Entonces necesitaré una forma de encontrar el píxel de la posición de desplazamiento actual, pero no existe un método como element.currentScrollPosition
¿Cómo puedo encontrar la posición de desplazamiento actual del gráfico?
Restaré la posición de 1520px para ver si el usuario se ha desplazado hasta el final si el resultado es 0.
Este es el código para cada fila:
function getScrollPosition() { const plTable = document.getElementById('plTable'); const x = plTable?.scrollHeight; const y = plTable?.scrollTop; const z = plTable?.offsetHeight; console.log(x); console.log(y); // scroll position from top console.log(z); } // chart component return ( //... skip some code </TableHead> <TableBody> <div id="plTable" onClick={getScrollPosition} style={{ border: '1px solid red' }} > {lineItems.map((lineItem, i) => ( <TableRow key={lineItem.id}> <LineItemRow i={i} id={lineItem.id} reportName={reportName} level={lineItem.level} /> </TableRow> ))} </div> </TableBody> </Table> </Scrollbar> </CardContent> </Card> )No encontré scrollTop y offsetHeight demasiado útiles, así que puedes ignorar eso.
También scrollTop siempre da 0 sin importar dónde me desplace y luego haga clic
1 answers
Answer question0
La mejor manera de lidiar con el desplazamiento es mediante el uso de una API Observer, es mejor para el rendimiento de su sitio web.
Esto es lo que debes hacer:
//Add an elemnt in your html with the class of "end" at the end of the chart //I recommend adding an empty div with the class of "end" and setting it's opacity to 0 const end =document.querySelector(".end"); const endObserver = new IntersectionObserver(function(entries){ const [entry] = entries; if(entry.isIntersecting === false) { //Put what you want to happen if the end is NOT visible } else{ //Put what you want to happen if the end is visible //For instance firing your function } },{root:null,threshold:1}); endObserver.observe(end);