Как создать индикатор прокрутки с помощью ReactJS?

Опубликовано: 8 Августа, 2022

Следующий подход описывает, как создать индикатор прокрутки с помощью React JS. Это простой эффект, который вы можете добавить на любой веб-сайт ReactJS.

Условие:

Базовые знания npm и команды create-react-app.
Базовые знания о styled-components.
Базовые знания хуков useState().

Базовая настройка: вы начнете новый проект с помощью команды create-react-app.

npx create-react-app react-scroll-indicator

Теперь перейдите в папку react-scroll-indicator , введя данную команду в терминале.

cd react-scroll-indicator

Требуемый модуль: Установите зависимости, необходимые в этом проекте, введя данную команду в терминале:

npm install --save styled-components

Теперь создайте папку компонентов в src, затем перейдите в папку компонентов и создайте два файла ScrollIndicator.js и Styles.js .

Структура проекта: файловая структура проекта будет выглядеть следующим образом:

Пример: в этом примере мы разработаем компонент индикатора прокрутки, для этого нам нужно будет манипулировать файлом App.js и другим файлом созданных компонентов.

Мы создаем состояние с прокруткой первого элемента в качестве начального состояния, имеющего значение 0, и вторым элементом в качестве функции setScroll() для обновления состояния. Затем создается функция с именем onScroll, в которой мы объявляем следующие переменные:

Прокрутка: сообщает нам, сколько пикселей пользователь уже прокрутил вниз.
MaxHeight: показывает нам разницу между высотой всей веб-страницы и высотой максимальной части браузера, которую может видеть пользователь.
ScrollPercent: сообщает нам процентное значение ширины элемента индикатора прокрутки. Он равен 100, умноженному на отношение количества пикселей, которые пользователь прокрутил до сих пор (сверху), к общему количеству пикселей оставшейся части браузера, которую пользователь может видеть только при прокрутке вниз.

Когда мы начинаем прокручивать страницу вниз, функция onScroll запускается как событие через свойство window.addEventListener. Он устанавливает значение состояния в ScrollPercent, из-за чего полоса индикатора начинает заполняться зеленым цветом, когда мы прокручиваем страницу вниз. Когда мы прокручиваем страницу вверх, количество цветов уменьшается.

ScrollIndicator.js

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;

Styles.js

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;
`

App.js

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

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Вывод: теперь откройте браузер и перейдите по адресу http://localhost:3000/ , вы увидите следующий вывод:

Technical Scripter

Как создать индикатор прокрутки с помощью ReactJS?

ScrollIndicator.js

Styles.js

App.js

РЕКОМЕНДУЕМЫЕ СТАТЬИ