-1
var progress = 0.0 => 0.99 => 1;
//tipo de cálculo que eu gostaria...
var obj = {
'will-change': 'transform',
'transform': 'scale3d('+progress+', 1, 1)'
}
I have two methods that makes modifying the width, but both don’t seem very smooth:
Javascript ES6:
window.onscroll = function () {
scrollReading()
};
function scrollReading() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
scrolled = (winScroll / height) * 100;
var ready_bar = {
width:scrolled + "%"
}
}
jQuery:
$(window).scroll(function(){
var top = $(window).scrollTop();
var height = $(document).height();
height = height - $(window).height();
var progress = top/height;
progress = progress * 100;
progress = progress + "%";
$("#progress-bar").width(progress);
progress = progress.substring(0, progress.length - 2);
progress = Math.round(progress * 9007199254740991) / 9007199254740991;
progress = progress + "%";
if(top / height === 1){
progress = "100%";
}
$("#percentage").html(progress);
});