How to Create Scroll Indicator

Have you noticed that as you scroll down the page, there is a scrollbar at the top of every page?

A scroll indicator is a bar that shows how far down a page has been scrolled. The bar fills up as we scroll down, and as we scroll up, the bar quantity decreases.


Or this scrollbar displays the amount of length you’ve covered scrolling down the page. Scroll position indications include variations on the vertical scrollbar, horizontal components at the top or bottom of the page, and other styles.

Now we’ll develop a simple web-page with text to allow scrolling, and then we’ll use JavaScript to make the scroll indicator work.

In this example, we’ll show you how to create scroll indicator for your website using a little JavaScript code.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>create scroll indicator</title>

</head>
<body>
<div id="progress-bar"></div>
<div id="section"></div>

<!-- your content here -->

<div  style="padding:100px 400px;">
<h2>How to Create Scroll Indicator using HTML CSS and JavaScript</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quaerat repellat id facere recusandae
        praesentium.</p>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quaerat repellat id facere recusandae
        praesentium.</p>
         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet quaerat repellat id facere recusandae
        praesentium.</p>
       <ul>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
    </ul>
       <ul>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
    </ul>
       <ul>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
        <li>your content</li>
    </ul>
</div>

</body>
</html>

Add Styles like this

<style type="text/css">
body{
      overscroll-behavior-y: none;
}
#progress-bar{
        position: fixed;
top: 0;
left: 0;
height: 0.2rem;
background: linear-gradient(to right, #ff5f6d, #ffc371);
width: 0%;
max-width: 100%;
min-width: 0%;
z-index: 100;
transition: width 0.2s ease-out;
}
</style>

Finally add JavaScript code

// JS code

<script type="text/javascript">

  const animateProgressBar = () => {

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progress-bar").style.width = scrolled + "%";

}

window.addEventListener('scroll', animateProgressBar)

</script>
//

Similar Posts