如何使用 ReactJS 创建滚动指示器？

以下方法介绍了如何使用 React JS 创建滚动指示器。这是一个可以添加到任何 ReactJS 网站的简单效果。

先决条件：

• npm & create-react-app 命令的基础知识。
• 样式组件的基本知识。
• useState()钩子的基本知识。

基本设置：您将使用create-react-app命令启动一个新项目。

npx create-react-app react-scroll-indicator

现在通过在终端中键入给定的命令转到您的react-scroll-indicator文件夹。

cd react-scroll-indicator

所需模块：通过在终端中键入给定命令来安装此项目所需的依赖项：

npm install --save styled-components

现在在 src 中创建components文件夹，然后转到 components 文件夹并创建两个文件ScrollIndicator.js和Styles.js 。

项目结构：项目中的文件结构将如下所示：

示例：在本示例中，我们将设计一个滚动指示器组件，为此我们需要操作 App.js 文件和其他创建的组件文件。

我们创建一个状态，第一个元素滚动作为初始状态，值为 0，第二个元素作为函数setScroll()用于更新状态。然后创建一个名为onScroll的函数，我们在其中声明以下变量：

• Scrolled：它告诉我们用户到目前为止已经向下滚动了多少像素。
• 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 (
    
      
        
        
      
      
        GeeksForGeeks Scroll Indicator
      
    
  );
};
  
export default ScrollIndicator;

样式.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;
`

应用程序.js

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

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：