0
var amount = document.getElementsByClassName("cart-total-qty")[0].innerHTML;
console.log(amount);

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );
var tenPercent = height*.9

window.addEventListener("scroll", function() {
    scrollAmount = window.scrollY;
    if(scrollAmount == tenPercent){
    alert("It's happening (Insert Ron Paul)");
    }
});

In my code above i am getting the height of the page using an example i found here: How to get height of entire document with JavaScript?

I am then trying to trigger an event once the user has scrolled to the bottom ten percent of the page. The problem is that scrollAmount does not ever reach within 10% of height

In my example height is returned as 1280 and scrollAmount never returns higher then 1040 while scrolling, but the strange part is that if i change the height of my browser i get different results for scrollAmount when i scroll to the bottom.

Community
  • 1
  • 1
Andrew Font
  • 1,245
  • 3
  • 19
  • 38

1 Answers1

1

First of all, it is expected that scrollAmount would return a value significantly lower than content height of the document. If you look closer, maximum value of it is actually (content height - window height). Think of it like this: suppose your content was just one pixel longer than available window height, in that case what should be the maximum scrollAmount? I'd expect it to be 1. So replace your tenPercent = height*.9 with tenPercent = (height-window.innerHeight)*.9

Second, you scroll in steps of 100px or so. Sure some animation may be there, but event doesn't fire constantly for every possible value of scrollAmount. It is unlikely that during scroll, scrollAmount would exactly be equal to tenPercent. So replace your scrollAmount == tenPercent with scrollAmount > tenPercent

Pranav Gupta
  • 944
  • 6
  • 11