code for tracking progress bar on a div using a scroll event listener in vanilla JavaScript

Question

code for tracking progress bar on a div using a scroll event listener in vanilla JavaScript

I am currently working on a vertical "progress bar" that will serve as a timeline element. However, I am facing the issue of making it match the height of a specific div rather than the body itself.

Despite numerous attempts, I have yet to find a solution, and I prefer not to share my unsuccessful methods to prevent confusion.

Below is the code that successfully adjusts the bar according to the body's height. I would greatly appreciate any assistance or advice on modifying this code to reflect the height of an individual element:

function adjustHeight() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolledPercentage = (winScroll / totalHeight) * 100;
  document.querySelector(".progress_bar").style.height = scrolledPercentage + "%";
}
window.addEventListener('scroll', adjustHeight);

javascript

Answer 1

Answer №1

const scrollableDiv = document.querySelector('.a');
function updateProgressBar() {
  const heightDifference = scrollableDiv.scrollHeight - scrollableDiv.clientHeight;
  const scrolledPercent = (scrollableDiv.scrollTop / heightDifference) * 100;
  document.querySelector(".p_bar").style.width = `${scrolledPercent}%`;
}
scrollableDiv.addEventListener('scroll', updateProgressBar);

.a{
  height:100vh;
  overflow:scroll;
  color:#fff;
}
.content{
  height:300vh;
  width:100%;
  background: #444;
}

.p_bar{
  width:1%;
  height:20px;
  background: dodgerblue;
  position:sticky;
  top:20px;
  border-radius:20px;
  
}

<html>
  <body>
  
    <div class="a">
      <div class="content">
        <h1>please scroll </h1>
        height/width
        
        <div class="p_bar"></div>
      </div>
    </div>
    
  </body>
</html>

If this solution doesn't work for you, feel free to leave a comment and I'll do my best to assist. Thank you.

Answer 2

const scrollableDiv = document.querySelector('.a');
function updateProgressBar() {
  const heightDifference = scrollableDiv.scrollHeight - scrollableDiv.clientHeight;
  const scrolledPercent = (scrollableDiv.scrollTop / heightDifference) * 100;
  document.querySelector(".p_bar").style.width = `${scrolledPercent}%`;
}
scrollableDiv.addEventListener('scroll', updateProgressBar);

.a{
  height:100vh;
  overflow:scroll;
  color:#fff;
}
.content{
  height:300vh;
  width:100%;
  background: #444;
}

.p_bar{
  width:1%;
  height:20px;
  background: dodgerblue;
  position:sticky;
  top:20px;
  border-radius:20px;
  
}

<html>
  <body>
  
    <div class="a">
      <div class="content">
        <h1>please scroll </h1>
        height/width
        
        <div class="p_bar"></div>
      </div>
    </div>
    
  </body>
</html>

If this solution doesn't work for you, feel free to leave a comment and I'll do my best to assist. Thank you.

Answer 3

Answer №2

Finally presenting the code with the progress bar functionality! The width of the progress bar increases only after the user scrolls past the red div and stops at 100% once they scroll beyond the content div.

// Trigger myFunction when the page is scrolled
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 
  const contentHeight  =  document.querySelector(".content").offsetHeight
  const contentOffssetTop =  document.querySelector(".content").offsetTop
  
  var scrolled = (winScroll / height) * 100;
  let ScrollBarWidth
  const diff=  winScroll - contentOffssetTop
  if(diff <= 0){
     ScrollBarWidth=0
  }else{
     //check if we hav reached div bottom 
     if( (winScroll +100) <= (contentOffssetTop + contentHeight)  ){
          ScrollBarWidth=(diff /contentHeight)*100
     }else{
          ScrollBarWidth=100
     }
  }
  document.getElementById("myBar").style.width = ScrollBarWidth + "%";
}

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  padding:1rem;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
   background-color:"red";
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

.offsset {
  background-color: red ;
  height: 700px;
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div class="offsset">ofsset div</div>
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
  <p>It also <b>works when you scroll back up</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit...

Answer 4

Finally presenting the code with the progress bar functionality! The width of the progress bar increases only after the user scrolls past the red div and stops at 100% once they scroll beyond the content div.

// Trigger myFunction when the page is scrolled
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
 
  const contentHeight  =  document.querySelector(".content").offsetHeight
  const contentOffssetTop =  document.querySelector(".content").offsetTop
  
  var scrolled = (winScroll / height) * 100;
  let ScrollBarWidth
  const diff=  winScroll - contentOffssetTop
  if(diff <= 0){
     ScrollBarWidth=0
  }else{
     //check if we hav reached div bottom 
     if( (winScroll +100) <= (contentOffssetTop + contentHeight)  ){
          ScrollBarWidth=(diff /contentHeight)*100
     }else{
          ScrollBarWidth=100
     }
  }
  document.getElementById("myBar").style.width = ScrollBarWidth + "%";
}

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  position: fixed;
  top: 0;
  z-index: 1;
  padding:1rem;
  width: 100%;
  background-color: #f1f1f1;
}

.progress-container {
  width: 100%;
   background-color:"red";
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  background: #4caf50;
  width: 0%;
}

.content {
  padding: 100px 0;
  margin: 50px auto 0 auto;
  width: 80%;
}

.offsset {
  background-color: red ;
  height: 700px;
  width: 100%;
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <div class="offsset">ofsset div</div>
<div class="header">
  <h2>Scroll Indicator</h2>
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>  
</div>

<div class="content">
  <h3>Scroll Down to See The Effect</h3>
  <p>We have created a "progress bar" to <b>show how far a page has been scrolled</b>.</p>
  <p>It also <b>works when you scroll back up</b>.</p>
  <p>It is even <b>responsive</b>! Resize the browser window to see the effect.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit...

code for tracking progress bar on a div using a scroll event listener in vanilla JavaScript

Answer №1

Answer №2

Similar questions

Is there a way to convert the instructions or code meant for webpack.config.js so that they can be applied to the vue.config.js file?

Update a Div automatically without causing it to scroll back to the beginning of the Div

I have successfully configured the div to show only one at a time, however, I am currently facing an issue with turning off the div

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

Using an external file to control the Angular $md-dialog

Strategies for selecting glyphs in SVG fonts based on their Unicode properties

Issue with JSViews visible link and converter not functioning properly

Is it possible for me to create an If statement that can verify the current index within a Map?

retrieving information within an ajax function's callback

Using Backbone.js to Persist Information on the Server

Exploring HTML5 Canvas 2D Frameworks with an emphasis on collision detection and physics simulations

The URI entered is not valid: The parsing of the hostname failed. Electron Builder

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

tips for adding text to an input field after it has been submitted

Challenge with AngularJS 1.6.8: Struggling to transfer data effectively between controller and view

Javascript Promise: managing the flow of execution

Issue with moment library causing date to appear incorrect on 31st day

swapping out an external CSS file in React for a new CSS file

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

Importing dynamic NodeJS modules from one module