Scroll indicator JavaScript
2
I use the following code for a scroll indicator which I include on multiple pages.
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>But some of the pages are not able to scroll due to lack of content I am trying to get the scroll indicator to also be filled I can't figure out why it's not filling if it cant scroll ( I am not good with JavaScript either :3 )
javascript html css
edited Nov 14 '18 at 8:40
Aravind
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
add a comment |
2
I use the following code for a scroll indicator which I include on multiple pages.
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>But some of the pages are not able to scroll due to lack of content I am trying to get the scroll indicator to also be filled I can't figure out why it's not filling if it cant scroll ( I am not good with JavaScript either :3 )
javascript html css
edited Nov 14 '18 at 8:40
Aravind
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
add a comment |
2
2
2
I use the following code for a scroll indicator which I include on multiple pages.
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>But some of the pages are not able to scroll due to lack of content I am trying to get the scroll indicator to also be filled I can't figure out why it's not filling if it cant scroll ( I am not good with JavaScript either :3 )
javascript html css
edited Nov 14 '18 at 8:40
Aravind
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
I use the following code for a scroll indicator which I include on multiple pages.
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>But some of the pages are not able to scroll due to lack of content I am trying to get the scroll indicator to also be filled I can't figure out why it's not filling if it cant scroll ( I am not good with JavaScript either :3 )
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>javascript html css
javascript html css
edited Nov 14 '18 at 8:40
Aravind
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
edited Nov 14 '18 at 8:40
Aravind
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
edited Nov 14 '18 at 8:40
Aravind
3,20811833
edited Nov 14 '18 at 8:40
Aravind
3,20811833
edited Nov 14 '18 at 8:40
Aravind
3,20811833
3,20811833
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
asked Nov 14 '18 at 8:32
Chris. P Chris. P
154
154
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
0
Two things:
- Execute your function at least once when the page is loaded
- Check if document has no scroll and set full width in that case.
Here it is:
// When the user scrolls the page, execute myFunction
window.onscroll = function () {
myFunction()
};
// Execute myFunction once when the page is loaded
window.onload = function() {
myFunction();
}
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100; // Default value: fill width
// Only if document is scrollable
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
document.getElementById("myBar").style.width = scrolled + "%";
}
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
add a comment |
0
Try this:
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
add a comment |
0
You cant't divide by zero
try this
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
add a comment |
0
The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:
let heightClient = window.innerHeight;
let body = document.body,
html = document.documentElement;
let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(heightClient < heightDocument){
window.onscroll = function() {myFunction()};
}else document.getElementById("myBar").style.width = "100%";
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295911%2fscroll-indicator-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Two things:
- Execute your function at least once when the page is loaded
- Check if document has no scroll and set full width in that case.
Here it is:
// When the user scrolls the page, execute myFunction
window.onscroll = function () {
myFunction()
};
// Execute myFunction once when the page is loaded
window.onload = function() {
myFunction();
}
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100; // Default value: fill width
// Only if document is scrollable
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
document.getElementById("myBar").style.width = scrolled + "%";
}
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
add a comment |
0
Two things:
- Execute your function at least once when the page is loaded
- Check if document has no scroll and set full width in that case.
Here it is:
// When the user scrolls the page, execute myFunction
window.onscroll = function () {
myFunction()
};
// Execute myFunction once when the page is loaded
window.onload = function() {
myFunction();
}
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100; // Default value: fill width
// Only if document is scrollable
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
document.getElementById("myBar").style.width = scrolled + "%";
}
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
add a comment |
0
0
0
Two things:
- Execute your function at least once when the page is loaded
- Check if document has no scroll and set full width in that case.
Here it is:
// When the user scrolls the page, execute myFunction
window.onscroll = function () {
myFunction()
};
// Execute myFunction once when the page is loaded
window.onload = function() {
myFunction();
}
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100; // Default value: fill width
// Only if document is scrollable
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
document.getElementById("myBar").style.width = scrolled + "%";
}
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
Two things:
- Execute your function at least once when the page is loaded
- Check if document has no scroll and set full width in that case.
Here it is:
// When the user scrolls the page, execute myFunction
window.onscroll = function () {
myFunction()
};
// Execute myFunction once when the page is loaded
window.onload = function() {
myFunction();
}
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = 100; // Default value: fill width
// Only if document is scrollable
if (height > 0) {
scrolled = (winScroll / height) * 100;
}
document.getElementById("myBar").style.width = scrolled + "%";
}
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
answered Nov 14 '18 at 8:50
DanieleAlessandraDanieleAlessandra
626511
626511
add a comment |
add a comment |
0
Try this:
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
add a comment |
0
Try this:
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
add a comment |
0
0
0
Try this:
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
Try this:
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>.progress-container {
width: 100%;
height: 8px;
background: #ccc;
position: fixed;
top: 0;
z-index: 1000;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
} <div class="fixedBar">
<div class="header">
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
</div>
<script>
window.onload = function () {
if (document.documentElement.scrollHeight === document.documentElement.clientHeight){
document.getElementById("myBar").style.width = "100%";
}
};
// 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;
var scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
answered Nov 14 '18 at 8:48
joshua millerjoshua miller
716516
716516
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
add a comment |
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
Thanks for the quick reply it works !!! <3
– Chris. P
Nov 14 '18 at 8:54
add a comment |
0
You cant't divide by zero
try this
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
add a comment |
0
You cant't divide by zero
try this
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
add a comment |
0
0
0
You cant't divide by zero
try this
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
You cant't divide by zero
try this
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = height !== 0 ? (winScroll / height) * 100 : 0;
document.getElementById("myBar").style.width = scrolled + "%";
} edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
edited Nov 14 '18 at 8:51
Brendan Nee
2,47312328
2,47312328
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
answered Nov 14 '18 at 8:49
Wladimir DiskowskiWladimir Diskowski
586
586
add a comment |
add a comment |
0
The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:
let heightClient = window.innerHeight;
let body = document.body,
html = document.documentElement;
let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(heightClient < heightDocument){
window.onscroll = function() {myFunction()};
}else document.getElementById("myBar").style.width = "100%";
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
add a comment |
0
The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:
let heightClient = window.innerHeight;
let body = document.body,
html = document.documentElement;
let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(heightClient < heightDocument){
window.onscroll = function() {myFunction()};
}else document.getElementById("myBar").style.width = "100%";
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
add a comment |
0
0
0
The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:
let heightClient = window.innerHeight;
let body = document.body,
html = document.documentElement;
let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(heightClient < heightDocument){
window.onscroll = function() {myFunction()};
}else document.getElementById("myBar").style.width = "100%";
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
The problem you have is due to the lack of a check of the height of the docuement and the client's window height. Yo can solve it like this:
let heightClient = window.innerHeight;
let body = document.body,
html = document.documentElement;
let heightDocument = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
if(heightClient < heightDocument){
window.onscroll = function() {myFunction()};
}else document.getElementById("myBar").style.width = "100%";
function myFunction() {
let winScroll = document.body.scrollTop || document.documentElement.scrollTop;
let height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let scrolled = (winScroll / height) * 100;
document.getElementById("myBar").style.width = scrolled + "%";
}
</script>
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
edited Nov 14 '18 at 9:12
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
answered Nov 14 '18 at 8:50
marius-serbanmarius-serban
13
13
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53295911%2fscroll-indicator-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
