Establecer la posición de desplazamiento en React

Las aplicaciones web en estos días tienden a mostrar una gran cantidad de contenido. Los usuarios a menudo se ven obligados a desplazarse por toda la página para encontrar lo que están buscando.

Esta es una mala experiencia de usuario. La solución es crear botones que permitan a los usuarios saltar a una sección específica de la página sin tener que desplazarse.

Este artículo explorará cómo establecer una posición de desplazamiento fija en React.

Establecer la posición de desplazamiento en React

Primero, debemos almacenar una referencia al elemento DOM en una variable de JavaScript. Para eso, podemos usar el gancho useRef(), que es esencialmente una alternativa al método getElementById() en JavaScript nativo.

Veamos un ejemplo:

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);

  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
    </div>
  );
}

Aquí, usamos el gancho useRef() para generar valores ref. El argumento del gancho useRef() será el valor inicial de ref.

El gancho también devuelve una referencia, que podemos almacenar en la variable. Almacenamos los valores ref en las variables welcome, about y terms.

Dentro de JSX, establecemos el atributo ref de tres elementos igual a la variable donde almacenamos el ref. Esto vincula los elementos DOM como la etiqueta <h1> a las variables de JavaScript.

Luego creamos controladores de eventos, que navegarán directamente a estos elementos.

Nota: no olvide envolver la referencia a las variables de JavaScript entre llaves. Deben escribir expresiones de JavaScript (como una referencia a la variable) dentro de JSX.

A continuación, vamos a crear un controlador de eventos que tome un argumento, un valor ref, y establezca la posición de desplazamiento en el borde superior de ese elemento DOM.

const setScrollPosition = (ref) => {
  window.scrollTo({
    top: ref.current.offsetTop,
    behavior: 'smooth',
  });
};

De esta manera, el controlador de eventos es reutilizable y se puede usar para desplazarse a cualquier elemento específico. Todo lo que tenemos para establecer la posición de desplazamiento es pasar una variable ref específica a los controladores de eventos.

Para eso, usamos el método scrollTo() de la interfaz window, que está disponible de forma nativa en las bibliotecas de JavaScript, incluido React.

Accedemos a la propiedad actual del valor ref para determinar el borde superior del elemento DOM. Usamos el método scrollTo() para establecer la parte superior de la posición de desplazamiento en el borde superior del elemento DOM.

Para establecer una navegación fluida, también especificamos la propiedad comportamiento del método scrollTo.

Ahora, veamos el código completo del componente.

import { useRef } from "react";
export default function App() {
  const welcome = useRef(null);
  const about = useRef(null);
  const terms = useRef(null);
  const setScrollPosition = (ref) => {
    window.scrollTo({
      top: ref.current.offsetTop,
      behavior: "smooth"
    });
  };
  return (
    <div className="App">
      <h1 ref={welcome}>Welcome to Web Application</h1>
      <h1 ref={about}>About Us</h1>
      <h1 ref={terms}>Terms and Conditions</h1>
      <div className="buttons">
        <button onClick={() => setScrollPosition(welcome)}>
          Skip to Welcome
        </button>
        <button onClick={() => setScrollPosition(about)}>
          Skip to 'About Us'
        </button>
        <button onClick={() => setScrollPosition(terms)}>Skip to terms</button>
      </div>
    </div>
  );
}

En este código final, agregamos un pie de página adhesivo con tres botones. Puede abrir esta demostración en vivo de CodeSandBox para ver cómo funciona la aplicación.

Al hacer clic en cualquiera de los botones, se establecerá la posición de desplazamiento enfocada en elementos DOM específicos.

Esto se debe a que, en el controlador de eventos onClick, hacemos la llamada a la función setScrollPosition() que definimos anteriormente. Suministramos un argumento, una variable que almacena valores ref para los elementos en los que configuramos el controlador de eventos.