¿Cómo crear un indicador de desplazamiento usando ReactJS?

El siguiente enfoque cubre cómo crear un indicador de desplazamiento usando React JS. Es un efecto simple que puede agregar a cualquier sitio web de ReactJS.

Requisito previo:

• Conocimientos básicos de npm y comando create-react-app.
• Conocimientos básicos de componentes con estilo.
• Conocimiento básico de ganchos useState() .

Configuración básica: Comenzará un nuevo proyecto usando el comando create-react-app .

npx create-react-app react-scroll-indicator

Ahora vaya a su carpeta de indicador de desplazamiento de reacción escribiendo el comando dado en la terminal.

cd react-scroll-indicator

Módulo requerido: Instale las dependencias requeridas en este proyecto escribiendo el comando dado en la terminal:

npm install --save styled-components

Ahora cree la carpeta de componentes en src, luego vaya a la carpeta de componentes y cree dos archivos ScrollIndicator.js y Styles.js .

Estructura del proyecto: la estructura de archivos en el proyecto se verá así: 

Ejemplo: En este ejemplo, diseñaremos un componente de indicador de desplazamiento, para eso necesitaremos manipular el archivo App.js y otros archivos de componentes creados.

Creamos un estado con el desplazamiento del primer elemento como estado inicial con un valor de 0 y el segundo elemento como función setScroll() para actualizar el estado. Luego se crea una función con el nombre onScroll en la que declaramos las siguientes variables:

• Scrolled: Nos dice cuántos píxeles se ha desplazado el usuario hasta el momento.
• MaxHeight: Nos dice la diferencia entre la altura de toda la página web y la altura de la porción máxima del navegador que el usuario puede ver.
• ScrollPercent: Nos dice el valor porcentual del ancho del elemento Indicador de Scroll. Es igual a 100 multiplicado por la relación entre el número de píxeles que el usuario ha desplazado hacia abajo hasta ahora (desde arriba) y el número total de píxeles de la parte restante del navegador que el usuario solo puede ver al desplazarse hacia abajo.

Cuando comenzamos a desplazarnos hacia abajo en la página, la función onScroll se activa como un evento a través de la propiedad window.addEventListener . Establece el valor de estado en ScrollPercent debido a que la barra indicadora comienza a llenarse de color verde cuando nos desplazamos hacia abajo en la página. Cuando nos desplazamos hacia arriba en la página, la cantidad de color se reduce.

import React, { useState, Fragment } from "react";
import { Container, ProgressBar, ScrollContent, Heading } from "./Styles";
const ScrollIndicator = () => {
  const [scroll, setScroll] = useState(0);
  
  const onScroll = () => {
    const Scrolled = document.documentElement.scrollTop;
    const MaxHeight =
      document.documentElement.scrollHeight -
      document.documentElement.clientHeight;
    const ScrollPercent = (Scrolled / MaxHeight) * 100;
    setScroll(ScrollPercent);
  };
  
  window.addEventListener("scroll", onScroll);
  
  return (
    <Fragment>
      <Container>
        <ProgressBar style={{ width: `${scroll}%` }}>
        </ProgressBar>
      </Container>
      <ScrollContent>
        <Heading>GeeksForGeeks Scroll Indicator</Heading>
      </ScrollContent>
    </Fragment>
  );
};
  
export default ScrollIndicator;

import styled from 'styled-components';
  
export const Container = styled.div`
   background-color: black;
   height: 30px;
   position: sticky;
   top: 0;
   left: 0;
   z-index: 1;
   width: 100%;
`
  
export const ProgressBar = styled.div`
   height: 30px;
   background-color: green;
`
export const ScrollContent = styled.div`
   overflowY: scroll;
   height:2000px;
`; 
  
export const Heading = styled.h1`
   text-align: center;
   font-size: 3rem;
`

import ScrollIndicator from
    './components/ScrollIndicator';
  
function App() {
  return (
     <ScrollIndicator />
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: