Estoy tratando de mantener la posición de desplazamiento a pesar de que se agrega contenido en la parte superior de la página, cuando se desplaza hacia la parte superior en una aplicación React en la que estoy trabajando.

Yo he tratado:

• Obtener la posición del elemento superior en la página antes de agregar el contenido y luego usar algo como window.scrollTo(0, elementPosition)
• Calcular la diferencia entre la altura de la página antes y después del contenido agregado y volver a la posición original en función de la diferencia.
• Determinar dónde desplazarse en función de qué tan lejos estaba la ventana gráfica de la parte inferior antes de que se mostrara el contenido agregado, ya que esa posición no debería cambiar.

Nada de eso funcionó y estoy perdido. Este es el código responsable de crear el contenido, representar una parte del contenido y luego agregar contenido una vez que se desplaza hacia la parte superior:

//Creando el contenido:

 useEffect(() => { fetch('/api/endpoint', { method: 'GET', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' } }) .then(res => res.json()) .then(res => { setLogUsers(res.users); setTotalAmount(res.log.length); setMessages(limitedRender(res.log)); }) .catch(err => console.log(err)) }, [renderAmount]) return( messages.map(e => { return( <Msg message = {e}/> ); }) );

//Seleccionar una parte del contenido y detectar cuando se desplaza hacia la parte superior:

 const [totalAmount, setTotalAmount] = useState(); const [renderAmount, setRenderAmount] = useState(10); const limitedRender = (arr) => { if (arr.length >= renderAmount) { return arr.slice(arr.length - (renderAmount), arr.length) } else { return arr } } const posTop = () => { return ( typeof window.scrollY != 'undefined' ? window.scrollY : document.documentElement && document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0 ); } document.addEventListener('scroll', () => { if (posTop() === 0) { if (totalAmount - renderAmount >= 10) { setRenderAmount(renderAmount + 10); } else if (totalAmount - renderAmount < 10) { setRenderAmount(renderAmount + (totalAmount - renderAmount)); } } })

//También puede ser importante. Utilizo este fragmento de código para asegurarme de que el componente permanezca desplazado hacia abajo en el renderizado inicial.

 const btmUpView = () => { window.scrollTo(0, document.body.scrollHeight); } btmUpView(); return( <div> <div> <MsgFeed/> </div> <div> <input type="text"></input> <button onClick={() => sendMsg()}>Send</button> </div> </div> );