Lightweight Scroll Progress Bar In JavaScript – scrollProgress.js

Category: Javascript | May 23, 2023
Author:jeremenichelli
Views Total:289 views
Official Page:Go to website
Last Update:May 23, 2023
License:MIT

Preview:

Lightweight Scroll Progress Bar In JavaScript – scrollProgress.js

Description:

The scrollProgress.js library allows you to create a scroll bar reflecting how far a user has scrolled down your webpage.

As users scroll through content, the scroll progress bar will dynamically update to show how much of the page has been viewed.

Can be used in blog posts or lengthy articles to significantly improve user experience by providing a clear understanding of reading progress.

How to use it:

1. Install and import the scrollProgress.js library.

# NPM
$ npm i scrollprogress
import ScrollProgress from 'scrollprogress';
<!-- OR -->
<script src="/dist/scrollProgress.js"></script>

2. Create a container to hold the scroll progress bar.

<div class="progress-bar"></div>

3. Initialize the scrollProgress.js.

const progressElement = document.querySelector('.progress-bar');
const progressObserver = new ScrollProgress((x, y) => {
  progressElement.style.width = y * 100 + '%';
});

4. Apply your own CSS styles.

.progress-bar {
  background-color: #DC2626;
  top: 0;
  position: fixed;
  height: 10px;
  left: 0;
}

You Might Be Interested In:


Leave a Reply