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" class="header">
<div name="progress-container" class="progress-container">
<div name="myBar" class="progress-bar" 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.
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" class="header">
<div name="progress-container" class="progress-container">
<div name="myBar" class="progress-bar" 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>