Implementar la función de barra de desplazamiento en React

React es una biblioteca front-end popular porque le permite implementar una interfaz fácil de usar sin demasiados problemas.

Uno de los problemas más comunes es encontrar una forma fácil de usar para mostrar grandes volúmenes de datos. La barra de desplazamiento es una solución simple y fácil de usar para manejar el desbordamiento de datos.

En esta guía, exploraremos cómo aplicar barras de desplazamiento a componentes individuales en React.

Implementando la barra de desplazamiento en React

Hay varias formas de manejar demasiado contenido en React. La forma más fácil de implementar la función de barra de desplazamiento es a través de CSS.

En este ejemplo, tenemos un componente principal y uno secundario. Damos al contenedor principal en el componente <Section> un valor className de section.

export default function App() {
  return (
    <div className="App">
      <Section>
        some text
      </Section>
      <Section>
        some text
      </Section>
      <Section>
          some text
      </Section>
    </div>
  );
}
function Section(props) {
  return <div className="section">{props.children}</div>;
}

Luego podemos ir a CSS y aplicar estilos al componente secundario.

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  justify-content: space-between;
  height: 100vh;
}

.section {
  border: 2px solid red;
  width: 30%;
  font-size: 20px;
  overflow-y: scroll;
}

La propiedad CSS overflow-y es la más importante aquí. Dándole un valor de desplazamiento le dice a HTML que cree una barra de desplazamiento cada vez que el contenido (en este caso, el texto) no cabe en el contenedor.

Debido a que la propiedad overflow-y especifica el eje y, esto no afecta el ancho, solo la altura.

Sin esta propiedad, el texto se desbordaría fuera de los bordes del componente.

Puede ir a esta demostración en vivo en CodeSandbox y ver el efecto de aplicar esta propiedad.

Tenemos tres componentes <Section>. El primero contiene demasiado texto que no se ajusta a su tamaño normal.

Por lo tanto, cuenta con una barra de desplazamiento, que le permite desplazarse hacia abajo para ver el texto completo. El componente central no tiene demasiado texto, por lo que no necesita desplazarse hacia abajo.

El último componente le permite desplazarse hacia abajo, similar al primero.

Puede usar esta propiedad CSS para aplicar barras de desplazamiento de forma selectiva solo a los componentes que lo necesitan. Puede hacer lo mismo para el componente principal.