CODEWITHSUNDEEP
javascripthtmlmathheight
Pathsofdesign
Pathsofdesign

Reputation: 5038

Javascript Scroll Height Percentage Math

I have a simple JS module that calculates the percentage of the current scroll position.

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

This is working as expected, if the window height is 500px and the doc height is 1000px, then the initial scroll position is 50%. If you were to scroll to the bottom it would be 100%.

What I would like to do is have my initial value be 1% and when scrolling to the bottom it return 100% (like it is now).

The problem is that my initial value of 50% is based off the window height (half the page is showing). For some reason I can't figure out the necessary math to have it start at 1% and go to 100% when reaching the bottom.

Upvotes: 0

Views: 2908

Answers (1)

Adjit
Adjit

Reputation: 10305

So, after a bunch of fiddling I came across your solution...

You have to take into consideration the current position of the document and the scroll bar. So if you want to get it between 0-100 you have to exclude the height of the window in your docHeight.

In your function I created a variable called initDiff and basically used this to calculate your value between 0-100.

This is how I set up your init function. Notice docHeight. Also, notice initDiff which calculates a difference that needs to be subtracted from your result. I don't use any scroll positioning because the initDiff is calculated for when the scroll-bar positioning is 0

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

    return this.percent();
}

Below is your percent function that I changed up a bit. Again, docHeight takes into consideration the current height of the window. Your result, once you take out the windowHeight from docHeight your number generally ranged from something like 50-150, it all depends on the window height. What I do is "keep" that number, but I calculate that difference. So for that range, your initDiff will be 50. If the range was 56-156 your initDiff will be 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);
}

Here is the fiddle : http://jsfiddle.net/XNVNj/2/

Just look at your console. Should explain it all.

Upvotes: 1

Related Questions