Scroll progress bar in an element-CodePudding

I am trying to make a scroll progress indicator on a div element. It works, but it only detects window scrolls and not the div's overflow scroll.

function myFunction() {
  var winScroll = document.getElementById("info").scrollTop;
  var height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled   "%";
}

window.onscroll = function() {
  myFunction()
};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

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

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

<div name="header" >
  <div name="progress-container" >
    <div name="myBar"  id="myBar"></div>
  </div>
</div>

Is there something wrong with my code or do I have to replace the window.onscroll with something else. I prefer not to use jQuery.

CodePudding user response：

The main problem is you set onscroll to window but should to document.getElementById("info"). See the example below:

function myFunction() {
    const winScroll = document.getElementById("info").scrollTop;
    const height = document.getElementById("info").scrollHeight - document.documentElement.clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled   "%";
  }

 document.getElementById("info").onscroll = function() {myFunction()};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

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

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

#info {
  width: 256px;
  height: 256px;
  overflow-y: auto;
  background-color: red;
}

<div name="header" >
    <div name="progress-container" >
        <div name="myBar"  id="myBar"></div>
    </div>
</div>

<div id="info">
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
</div>

CodePudding user response：

You used to trigger onscroll for window, but you should trigger it for your #info element

function myFunction() {
    const winScroll = document.getElementById("info").scrollTop;
    const height = document.getElementById("info").scrollHeight - document.getElementById("info").clientHeight;
    const scrolled = (winScroll / height) * 100;
    document.getElementById("myBar").style.width = scrolled   "%";
  }

 document.getElementById("info").onscroll = function() {myFunction()};

.header {
  position: fixed;
  top: auto;
  z-index: 1;
  width: 83.5%;
  background-color: #f1f1f1;
}

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

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

#info {
  width: 256px;
  height: 256px;
  overflow-y: auto;
  background-color: red;
}

<div name="header" >
    <div name="progress-container" >
        <div name="myBar"  id="myBar"></div>
    </div>
</div>

<div id="info">
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
  <p>SOME TEXT</p>
</div>