How to Create Scroll Indicator using ReactJS ?
Scroll Indicator in React JS refers to a representation of the length of the page visited or present on the screen. It shows the amount the pages that have been scrolled.
Prerequisite
Approach to create Scroll Indicator
To create a Scroll Indicator using ReactJS we will use a scroll event with window.addEventListener to capture the scroll and update the scroll indicator accordingly. Styled components are used to define the styles and CSS for reusable components.
Steps to create React Application
Step 1: You will start a new project using create-react-app command.
npx create-react-app react-scroll-indicator
Step 2: Now go to your react-scroll-indicator folder by typing the given command in the terminal.
cd react-scroll-indicator
Step 3: Install the dependencies required in this project by typing the given command in the terminal:
npm install --save styled-components
Project Structure:
Dependencies list after installing packages
{
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"styled-components": "^6.1.0",
"web-vitals": "^2.1.4"
}
}
Example: This example shows Scroll Indicator with the help of eventlisterners and styled-components.
Javascript
// Filename - App.js import ScrollIndicator from "./components/ScrollIndicator" ; function App() { return <ScrollIndicator />; } export default App; |
Javascript
// Filename - components/ScrollIndicator.js import React, { useState, Fragment } from "react" ; import { Container, ProgressBar, ScrollContent, Heading, Heading2, } 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>w3wiki</Heading> <Heading2> React Example for Scroll Indicator </Heading2> </ScrollContent> </Fragment> ); }; export default ScrollIndicator; |
Javascript
// Filename - components/Styles.js import styled from "styled-components" ; export const Container = styled.div` background-color: black; height: 10px; position: sticky; top: 0; left: 0; z-index: 1; width: 100%; border-radius: 10px; `; export const ProgressBar = styled.div` height: 10px; background-color: green; border-radius: 10px; `; export const ScrollContent = styled.div` overflowy: scroll; height: 2000px; `; export const Heading = styled.h1` text-align: center; color: green; font-size: 3rem; `; export const Heading2 = styled.h1` text-align: center; font-size: 2rem; `; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output