Javascript 滚动高度百分比数学

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());
};

这按预期工作，如果窗口高度为 500 像素，文档高度为 1000 像素，则初始滚动位置为 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 考虑了窗口的当前高度。您的结果，一旦您从docHeight 中取出windowHeight，您的数字通常在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/

看看你的控制台。应该说明一切。