Desplácese hasta un elemento en React

1. Desplácese hasta un elemento con el método Element.scrollIntoView() en React
2. Desplácese hasta un elemento con React Refs (Referencias)

La Internet moderna está llena de texto de todo tipo de contenido. Muy a menudo, tienes que desplazarte para encontrar lo que estás buscando. Sin embargo, desplazarse por un feed sin fin puede ser frustrante y una mala práctica de UX. Una solución es crear una tabla de contenido.

Los marcos de React ofrecen una mejor manera de lograr el mismo resultado. Puede hacer referencia a un elemento y desplazarse hasta él, ya sea automáticamente o haciendo clic en un botón. Detectar lo que buscan los usuarios y mostrarlo instantáneamente puede aumentar la facilidad de uso de su aplicación o sitio web.

Hay varias formas de implementar esta función. Dependiendo del tipo de componentes que esté utilizando (funcional frente a clase), debe elegir el adecuado.

Aún así, cada implementación consta de dos bits: el método Element.scrollIntoView() proporcionado por la interfaz de elementos HTML y React refs (abreviatura de referencias), que se pueden crear usando el gancho useRef() (para componentes funcionales), o método createRef() (para componentes de clase).

Desplácese hasta un elemento con el método Element.scrollIntoView() en React

Como se mencionó anteriormente, este método asegura que el desplazamiento se mueva hacia arriba o hacia abajo para mostrar el elemento al que se llama.

element.scrollIntoView() solo puede aceptar un argumento. Puede ser un objeto booleano alignToTop u options.

alignToTop

Si se pasa un valor booleano true, el elemento se alineará con la parte superior del elemento padre desplazable.

Pasar un valor false alineará el elemento con la parte inferior del elemento padre desplazable.

Options

Este argumento se representa como un objeto, pero le permite personalizar y cambiar la configuración predeterminada del método.

El objeto puede tener tres propiedades opcionales. En caso de su ausencia, la configuración vuelve a la predeterminada.

1. La propiedad behavior permite personalizar la transición. De forma predeterminada, está configurado como auto. Se puede configurar en smooth, que es una animación de mejor aspecto.
2. La propiedad block permite colocar el elemento verticalmente. Puede tomar el valor de start, center, end o nearest. start es la configuración predeterminada.
3. La propiedad inline permite colocar el elemento horizontalmente. Puede tomar el valor de start, center, end o nearest. nearest es el valor predeterminado.

Soporte del navegador

El método element.scrollIntoView() en sí es compatible con todos los navegadores principales. Sin embargo, algunos navegadores antiguos ignorarán el argumento opciones que se le ha pasado. Según caniuse.com, solo ~ 76% de los usuarios en todo el mundo tienen navegadores que respaldan este argumento. El sitio web lo describe como una función experimental.

Desplácese hasta un elemento con React Refs (Referencias)

Las referencias en React tienen muchas aplicaciones diferentes. Uno de los usos más comunes es hacer referencia a elementos en el DOM. Al hacer referencia al elemento, también obtiene acceso a la interfaz del elemento. Esto es fundamental para capturar el elemento al que queremos desplazarnos.

Se puede hacer referencia a un elemento estableciendo su atributo ref en la instancia de referencia. Aquí está el ejemplo de código:

const testDivRef = useRef(null);
<div className = 'testDiv' ref = {testDivRef}>< /div>

Aquí, el elemento <div> es el que queremos que aparezca en la vista. También puede usar referencias de React en cualquier otro elemento HTML.

<h1 ref={testDivRef}>Title</h1>

La propiedad current del objeto de referencia contiene el elemento real. Esto es lo que obtenemos si registramos el testDivRef.current en la consola:

A continuación se muestra la solución completa.

En un componente funcional:

function TestComponent() {
  const testRef = useRef(null);
  const scrollToElement = () => testRef.current.scrollIntoView();
  // Once the scrollToElement function is run, the scroll will show the element
  return (
    <>
      <div ref={testRef}>Element you want to view</div>
      <button onClick={scrollToElement}>Trigger the scroll</button>
    </>
  );
}

En un componente de clase:

class TestComponent extends Component {
  constructor(props) {
    super(props);
    this.testRef = React.createRef();
  }
  scrollToElement = () => this.testRef.current.scrollIntoView();
  // Once the scrollToElement method is run, the scroll will show the element
  render() {
    return <div ref = {this.testRef}>Element you want in view < /div>;
  }
}

Consejos adicionales:

La propiedad current solo será accesible una vez que el componente se haya montado.

Es mejor hacer referencia a la propiedad en una devolución de llamada useEffect() o equivalente (que es el método del bucle de vida componentDidMount() para los componentes de la clase).

useEffect(() => console.log(testRef.current), [])

También puede comprobar condicionalmente si ref.current equivale a verdadero antes de continuar.

if (testRef.current) {
  testRef.current.scrollIntoView()
}

Puede configurar el desplazamiento para que se active haciendo clic en un botón. De esta manera, puede asegurarse de que el desplazamiento se ejecutará una vez que se monten el botón y el componente que debe visualizarse.

<button onClick={scrollToElement}>Trigger the scroll</button>

una solución combinada

El paquete NPM llamado react-scroll-to-component se creó específicamente para proporcionar esta función como una solución integrada. Es fácil de instalar con npm o hilo.

Para obtener más información sobre este paquete, lea la documentación.