Question

我有一个简单的JS模块，可以计算当前滚动位置的百分比。

var scrollPercent = (function() {
    "use strict";

    var module = {
        config: {

        },
        init: function() {
            return this.percent();
        },
        percent: function() {
            var windowHeight = this.getWindowHeight();
            var docHeight = this.getDocHeight();
            var scrollPosition = this.getScrollPosition();
            var result = ((scrollPosition + windowHeight) / docHeight) * 100;

            return Math.floor(result);
        },
        getScrollPosition: function() {
            return (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;               
        },
        getWindowHeight: function() {
            return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0;
        },
        getDocHeight: function() {
            return Math.max(
                document.body.scrollHeight || 0, 
                document.documentElement.scrollHeight || 0,
                document.body.offsetHeight || 0, 
                document.documentElement.offsetHeight || 0,
                document.body.clientHeight || 0, 
                document.documentElement.clientHeight || 0
            );                
        }
    };

    return module;
});

var scroller = new scrollPercent;

window.onscroll = function(event) {
    console.log(scroller.init());
};

这是按预期工作的，如果窗口高度为500px且文档高度为1000px，则初始滚动位置为50％。如果您要滚动到底部，那将是100％。

我想做的是让我的初始值为1％，当滚动到底部时，它返回100％（就像现在一样）。

问题是我的初始值50％是基于窗口高度（页面显示的一半）。出于某种原因，我无法弄清楚必要的数学运算，从1％开始，到达底部时达到100％。

Answer 1

所以，经过一番摆弄，我遇到了你的解决方案......

您必须考虑文档和滚动条的当前位置。因此，如果您希望在0到100之间得到它，则必须排除docHeight中窗口的高度。

在你的函数中，我创建了一个名为initDiff的变量，基本上用它来计算0到100之间的值。

这就是我设置init功能的方法。请注意docHeight。另外，请注意initDiff，它会计算需要从结果中减去的差异。我不使用任何滚动定位，因为initDiff是在滚动条定位为0

时计算的

init: function() {
    var windowHeight = this.getWindowHeight();
    var docHeight = this.getDocHeight() - windowHeight;
    initDiff = (windowHeight / docHeight) * 100;
    console.log('Difference : ' + initDiff);

    return this.percent();
}

以下是我改变了一点的百分比功能。同样，docHeight考虑了窗口的当前高度。结果，一旦你从windowHeight取出docHeight，你的号码通常在50-150之间，这一切都取决于窗户的高度。我所做的是“保持”那个数字，但我计算出这个差异。因此，对于该范围，您的initDiff将为50。如果范围为56-156，则initDiff将为56

percent: function() {
    var windowHeight = this.getWindowHeight();
    var docHeight = this.getDocHeight() - windowHeight;
    var scrollPosition = this.getScrollPosition();            
    var result = ((scrollPosition + windowHeight) / docHeight) * 100 - initDiff;

    console.log('Window Height : ' + windowHeight);
    console.log('Document Height : ' + docHeight);
    console.log('Scroll Position : ' + scrollPosition);

    return Math.floor(result);
}

这是小提琴：http://jsfiddle.net/XNVNj/2/

只需看看你的控制台。应该解释一下。

Javascript滚动高度百分比数学

1 个答案:

这是小提琴：http://jsfiddle.net/XNVNj/2/