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

如果窗口高度為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考慮了窗口的當前高度。 您的結果是，一旦您從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/

只需查看您的控制台即可。 應該解釋一下。