jQuery detect scroll reach bottom not working on mobile browsers

Question

I' trying to detect when user scroll down bottom of a web page to load show some contents when user scroll to near bottom,

i use below function which works perfectly on all desktop web browsers, but its not worked on mobile browsers.

jQuery(function(){
  jQuery(document).scroll(function () {
    if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() -100) {
           //show contents
            alert('near bottom')
    }
  });
});

this is my working website i applied above http://discount.today/

when scroll down it shows some extra products, it working on normal browsers but not on mobile browsers,

can anyone help me to fix this issue please. i tried lots of solution which is on internet but no luck, thank you

Answer 1

Here is solution

 if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        alert("bottom detected");
}

add -100 so this will work on mobile

Answer 2

Mobile webs are different then desktop webs. The reason is very simple, The margins and padding are different.

Your website probably doesn't know how to detect that a change has occurred when running on mobile so as far as the web's concern, It didn't reach the bottom.

You need to use CSS 3 maybe or even jquery, to signal the web that a change in platform was made, The site is now smaller and so the bottom of the page.

As for how to do that, I am short in suggestions. This is the general direction though.

Answer 3

This is the solution which will work on every device:

window.onscroll = function() {
  var d = document.documentElement;
  var offset = d.scrollTop + window.innerHeight;
  var height = d.offsetHeight;
  console.log('offset = ' + offset);
  console.log('height = ' + height);
  if (offset >= height) {
    console.log('at the bottom');
  }
}