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>