CODEWITHSUNDEEP
javascript
Ghost
Ghost

Reputation: 63

scroll event listener for a progress bar, for a div, not the body (vanilla js)

I have this vertical "progress bar" that I'm going to use for a timeline, I cannot figure out how to make it match the height of a div and not the body.

I have tried multiple things which I'm not going to post to avoid confusing any of you.

Here's the code that works for the body height, I need help/tips on how to convert this to an element's height:

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

Upvotes: 2

Views: 794

Answers (2)

سعيد
سعيد

Reputation: 1764

okkay here it is finally , as you can see the progressbar doesn't start incrementing it's width until the user scrolls past the red div and it clamps the wdith att 100% after scrolling past the content div 

// When the user scrolls the page, execute myFunction 
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;
}

.header h2 {
  text-align: center;
}

.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 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 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 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 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 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 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 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 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 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>
</div>
 <div class="offsset">ofsset div</div>

</body>
</html>

Upvotes: 2

Sadhin
Sadhin

Reputation: 123

var divScroll = document.querySelector('.a');
function stretch() {
  var heightOrWidth = divScroll.scrollHeight - divScroll.clientHeight;
  var scrolled = (divScroll.scrollTop / heightOrWidth) * 100;
  document.querySelector(".p_bar").style.width = scrolled + "%";
}
divScroll.addEventListener('scroll', stretch);
.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>

I hope this may solve your problem if it doesn't comment it, I will always try to solve .tnx..

Upvotes: 3

Related Questions