Scroll Position Indicator In Vanilla JavaScript

Preview:

Description:

A vanilla JS scroll position indicator that shows how far you have scrolled down the page. Imagine you are reading a long article on a web browser, the indicator bar will be able to show your current reading progress.

It is great for enhancing the user experience in any long-length content. It provides users with a quick overview of how far they have scrolled, and this can let them know whether it’s worth their time to continue reading or if they should look elsewhere.

How to use it:

1. Install & download.

# Yarn
$ yarn add scroll-indicator-js
# NPM
$ npm i scroll-indicator-js

2. Import the scroll indicator.

// ES Module
import scrollIndicator from 'scroll-indicator-js'

// Browser
<script>var exports = {};</script>
<script src="./src/scrollIndicator.js"></script>

3. Create an empty DIV container for the scroll indicator. Available HTML data attributes:

• data-height: Height of the scroll indicator. Default: 3px.
• data-position: Position of the scroll indicator: ‘top’ (default), ‘bottom’, ‘left’, or ‘right’.
• data-color: Background color (hex/rgba/linear) of the scroll indicator.
• reverse: Reverse the scroll indicator. Default: false.

<div class="scroll-indicator" data-height="3px" data-position="top"></div>