Skip to content

Instantly share code, notes, and snippets.

@moinism
Last active June 18, 2021 20:57
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save moinism/a4d4fa5d47f205efaf56 to your computer and use it in GitHub Desktop.
Save moinism/a4d4fa5d47f205efaf56 to your computer and use it in GitHub Desktop.
Page Scroll Progress With JavaScript
// Read more about it here: https://lab.moin.im/2015/03/18/page-scroll-progress/
function scrollProgress (el, updateFunc, endFunc) {
document.addEventListener('DOMContentLoaded', function() {
var progress = 0,
end = false,
timeStart = null,
timeEnd = null,
height = 0,
elt = null;
if( el == window ) {
el = document.body;
elt = window;
height = window.innerHeight;
} else {
el = document.getElementById(el);
elt = el;
height = el.clientHeight;
}
elt.addEventListener('scroll', function() {
if(timeStart == null)
timeStart = Date.now();
progress = (el.scrollTop / ( el.scrollHeight - height ) ) * 100;
updateFunc( progress );
if(progress >= 100 && !end) {
timeEnd = Date.now();
end = true;
endFunc( timeEnd - timeStart );
}
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment