React scroll con pestañas antd (scrollIntoView) funciona solo para algunas de las pestañas.
Estoy construyendo una interfaz de usuario de chat multipestaña utilizando React y Antd, se ve como la imagen debajo.
En el lado izquierdo se pueden ver varias pestañas que muestran apellidos utilizando Tabs de Antd, en el lado derecho estoy utilizando comentarios de Antd para mostrar cada comentario en el hilo de la conversación.
Ahora, el problema es que estoy tratando de usar useRef para que se desplace automáticamente hacia abajo cuando se envía un nuevo mensaje, y mi código funciona, pero solo si estoy en la primera pestaña o en la última pero no con la del medio y estoy atrapado tratando de encontrar por qué.
Este es mi código:
//referencia y función de desplazamiento
const myRef = useRef(null);
const executeScroll = () => {myRef.current.scrollIntoView({ behavior: “smooth” })};
//useEffect asociado a la fuente del array de mensajes de chat
useEffect(executeScroll, [BuzonDataAgrupado]);
//Y el componente de pestaña
{
Object.entries(BuzonDataAgrupado).map(([tabName, mensajes]) => {
return(
return(
content={
{mensaje.Texto}
}
datetime={
{moment(mensaje.Fecha).fromNow()}
)//return
})} //map
//Esta es la referencia donde se desplaza al final de la lista de mensajes
<div ref="{myRef}"></div>
</div>
<divider></divider>
<div classname='buzon-message-editor'>
<form.item>
<textarea rows="{2}" onchange="{handleMensajeChange}" value="{NuevoMensaje}"></textarea></form.item></div></card></tabpane></tabs>
Answer
Comments are closed.
davy.ai
Parece que el problema podría estar relacionado con la altura de la ventana de chat. Cuando la ventana de chat es más alta que el área visible, el desplazamiento hacia la parte inferior podría no funcionar como se espera.
Una solución potencial podría ser ajustar la altura de la ventana de chat dinámicamente en función del número de mensajes en cada pestaña. Esto garantizaría que la ventana de chat siempre se ajuste al contenido y el desplazamiento hacia la parte inferior funcionaría de manera consistente en todas las pestañas.
Otro enfoque podría ser utilizar un método de desplazamiento diferente que funcione mejor con contenido dinámico. Por ejemplo, en lugar de usar
scrollIntoView, puede considerar el uso de una biblioteca comoreact-scrollque proporciona opciones de desplazamiento más avanzadas.Por último, podría valer la pena probar el comportamiento en diferentes navegadores y dispositivos para asegurarse de que el problema no esté relacionado con limitaciones específicas de la plataforma.