2

This question has been asked before (Infinite Scroll on Mobile browsers) but with no response.

I'm trying to implement infinite scroll.

The function to check whether the document is at the bottom, causing more to load is:

if ($(window).scrollTop() == $(document).height() - $(window).height())

This works fine on my computer, but does not work on any browsers on mobile (iOS).

On iPhone 5s for my page, $(document).height() reports 1055 and $(window).height() is 504. But even at the bottom of the page, $(window).scrollTop() is at most 507. Therefore 507 != 551 (1055-504)

I believe this may have something to do with $(window).height() reporting the height of the viewport which is somehow different in mobile.

Any help would be appreciated!

Community
  • 1
  • 1
kane
  • 5,465
  • 6
  • 44
  • 72
  • What does your viewport meta tag look like? – Josh Crozier Sep 01 '14 at 23:13
  • Try instead (document.documentElement.clientHeight) and see it it helps with mobiles. --- https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight – Tasos Sep 02 '14 at 09:28
  • jQM provides $.mobile.getScreenHeight(), does that work any better? – ezanker Sep 02 '14 at 12:57
  • @Josh I don't have a viewport meta tag – kane Sep 02 '14 at 14:37
  • @Tasos ezanker I'll try these, but I would like this to work on PC and mobile – kane Sep 02 '14 at 14:39
  • 2
    If you are using Jquery-Mobile there is a good solution here --- http://stackoverflow.com/questions/24728140/jquery-mobile-1-4-infinite-scrolling-window-scroll-not-firing – Tasos Sep 03 '14 at 04:28
  • 1
    @Tasos That was indeed the answer! And it works on both PC and mobile! Thank you! – kane Sep 03 '14 at 06:00

1 Answers1

4

The magic statement for me, worked for mobile as well as desktop Chrome browsers:

$(document).height() - window.visualViewport.height
manasi sakhare
  • 1,051
  • 7
  • 18