JQuery Mobile user scrolls down

Question

With the following code, I am trying to find when the user scrolls to the bottom of the page. In a jQuery mobile device.

$(window).scroll(function(){ if($(window).scrollTop() == $(document).height() - $(window).height()){ alert("The Bottom"); } }); 

For now, I just want him to deduce that they have reached the bottom.

My problem is that when the site loads, it displays this message. When I go down, he gives a warning.

Is there a way to stop it from loading the page and only do it when the user physically scrolls the page?

thanks

Answer 1

Is this because your content is shorter than your page? This means that when it loads, you are already at the bottom. I tried to reproduce your problem here http://jsfiddle.net/qESXR/2/ and it behaves the way you want. However, if I shorten the content and run it locally on my machine, I get the same result that you have.
If so, you can check the page height by the height of your html using these

 $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document 

like this:

 $(window).scroll(function(){ if($(document).height() > $(window).height()) { if($(window).scrollTop() == $(document).height() - $(window).height()){ alert("The Bottom"); } } }); 

Answer 2

The problem is that the jQuery Mobile page widget treats each "page" as a window before scrolling. To determine when the user scrolls to the end, bind the scroll function to $(document) :

http://jsfiddle.net/5x6T2/

 $(document).scroll(function () { if ($(window).scrollTop() + $(window).height() == $(document).height()) { alert("Bottom reached!"); } });