domingo 15 diciembre 2024

Mantener el scroll abajo del todo en React

Mantener el scroll automáticamente en la parte inferior de un contenedor es útil para aplicaciones como chats o logs en tiempo real. React proporciona herramientas como useRef y manipulaciones del DOM para lograr este comportamiento.

Usando `useRef` y el método `scrollIntoView`

La estrategia básica es añadir una referencia a un elemento que estará siempre al final del contenedor y desplazarse automáticamente hacia él.

Ejemplo básico

import React, { useRef, useEffect } from 'react';

const ChatWindow = ({ messages }) => {
  const bottomRef = useRef(null); // Crear una referencia al elemento final

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' }); // Desplazar hacia el final
  }, [messages]); // Se ejecuta cada vez que cambian los mensajes

  return (
    <div style={{ height: '300px', overflowY: 'auto', border: '1px solid #ccc' }}>
      {messages.map((msg, index) => (
        <p key={index}>{msg}</p>
      ))}
      <div ref={bottomRef} /> {/* Elemento para anclar el scroll */}
    </div>
  );
};

export default ChatWindow;

Explicación del código

1. useRef: Crea una referencia al final del contenedor donde se ubicará un elemento invisible (<div ref={bottomRef} />).

2. scrollIntoView: Método nativo que desplaza el elemento referenciado al área visible del contenedor.

3. Dependencia en useEffect: Cada vez que cambian los mensajes (messages), React desplaza el scroll automáticamente.

Alternativa: Ajustar el scroll con `scrollTop`

Si deseas un control más manual, puedes usar el método scrollTop del contenedor.

Ejemplo

import React, { useRef, useEffect } from 'react';

const ChatWindow = ({ messages }) => {
  const containerRef = useRef(null); // Referencia al contenedor

  useEffect(() => {
    const container = containerRef.current;
    if (container) {
      container.scrollTop = container.scrollHeight; // Ajustar el scroll
    }
  }, [messages]);

  return (
    <div
      ref={containerRef}
      style={{ height: '300px', overflowY: 'auto', border: '1px solid #ccc' }}
    >
      {messages.map((msg, index) => (
        <p key={index}>{msg}</p>
      ))}
    </div>
  );
};

export default ChatWindow;

Diferencias entre las técnicas

Técnica	Ventajas	Limitaciones
scrollIntoView	Sencilla y orientada al elemento final	Depende de un elemento adicional (`<div />`).
scrollTop	Control total sobre el comportamiento del contenedor	Requiere manipular propiedades del DOM manualmente.

Consideraciones adicionales

Suavidad del scroll: Para un desplazamiento fluido, puedes agregar { behavior: 'smooth' } en scrollIntoView o implementar animaciones personalizadas para scrollTop.
Rendimiento: Estas técnicas son ligeras, pero asegúrate de aplicarlas en componentes bien optimizados para evitar problemas de rendimiento.

Referencia

Consulta más sobre la manipulación del DOM con React en su documentación oficial:

https://reactjs.org/docs/refs-and-the-dom.html

Etiquetas:

javascript react

Creado por:

Jorge García

Fullstack developer