Best way to handle iPhone

[metafizzy]

Best way to handle iPhone

[kerkness]

I know this issue is closed, but thought I would post a follow up as this post is easily found in google.

You can make infinite-scroll work on the iPhone and It's a very simple "fix".

Instead of using..

<nav id="page_nav">
    <a href="?p=[NEXT]"></a>
</nav>

You need to add something to the href. If the href is empty I don't believe iPhone/WebKit renders the link and therefor infinite scroll cannot find the next page. I use a simple "." but for a better example use..

<nav id="page_nav">
    <a href="?p=[NEXT]">Next Page</a>
</nav>

[paulirish]

Hmmm..
me neither!

i've never really added anything for mobile devices specifically..

maybe onscroll never fires? because doesnt it have this alternate universe where everything is the viewport and scrolling doesnt exist? hmmm

[andyhot]

http://stackoverflow.com/questions/2863547/javascript-scroll-event-for-iphone-ipad

Looks like scroll events are sent but you have to use window.pageYOffset instead of $(node).scrollTop() to get the correct offset in iPhone case

(i too use both your plugins guys, but havent tested in iPhone)

[paulirish]

Nice. thanks for the tip, andy.

[paulirish]

andy, i saw you forked the repo..

do you wanna take a crack at adding this in? i wonder if we can do it without sniffing the UA for iphone, etc.

[andyhot]

i can only test on android :(
fork is so i can test some stuff to deal with the "invisible footer problem"

[voidfiles]

I don't know if this is fixed yet or not, but I think jquery is properly normalizing the pageYOffset when you call scrollTop, you can see it in the offset.js file in the 1.4.2 tag around line 242.

http://github.com/jquery/jquery/blob/1.4.2/src/offset.js

What I think might be up is the calculation of when to fetch new content. If the document is smaller then the window, I don't think it ever loads, also if the document is only slightly larger then the window their can be a problem.

[lukeshumard]

i've used the javascript events 'touchstart' and 'touchend' before and they work with iphone/ipad. maybe one way to handle apple's mobile devices would be to set up the manual trigger via a function bound to 'touchstart' and 'touchend'? i might run a test for this over the weekend.

[desandro]

iOS devices never trigger scroll event on window, as they don't 'scroll'. The full page is rendered and that image is then 'panned' to expose portions.

[lukeshumard]

please excuse the really crude nature of this demo, but i have a rough version of this working. it's still (very) buggy as i made this in virtually no time at all.

screenr:
http://screenr.com/HnE

you can try it out on your mobile device at the address below. it relies on touch events, so legacy/non-touch phones won't work.
http://lukeshumard.com/misc/mobile-infscr/

in this example, there are 4 pages, with the titles being "article title", "article title 2", and so on. in the screenr, it pulls 3 then gives an error, which is the first bug described below.

here's the js...
http://pastebin.com/9Gtyt8np

bugs that need sorting with this...

1. the manual trigger is prone to firing multiple times if you jump to the (very) bottom of the page. i've tried to correct this by adding the timeout of 400ms, but maybe it needs longer for the "bounce" effect on some mobile devices.

2. the manual trigger fires if there is less than a certain amount of distance left in the document to go through. all mobile browsers are different, so it's impossible to have a single number that will cover all browsers. if there's some better logic to determine when to trigger the plugin, i'm all for it.

3. some event to use besides touchevents for mobile browsers that don't support it. http://www.quirksmode.org/mobile/tableTouch.html

[lukeshumard]

i've been noticing more traffic on the mobile test in the above post, so i figured i should give an update.

even with the new debounced scroll event (v1.5.110408), this is still unreliable for scrolling. i think perhaps the best practice in this case is to unbind the plugin from the smartscroll event and manually fire the append via triggering retrieve.infscr

i'll work on a new demo for this soon.

[lukeshumard]

Yeah, best way to handle this is definitely using a manual trigger instead of scrolling. The scroll event is, to say the least, tricky to get working universally when you bind a function to it. I was hoping smartscroll would have taken care of this, but it hasn't. If you want to make sure that this will work on whatever device(s) you're planning for, do a manual trigger.

Facebook does it, and it seems to work for them. Twitter has the slide thing for touch screens, but you could easily accomplish that with touchstart and touchend to determine position and fire the trigger then.

[waterschaats]

Adding worked for me:

bufferPx: 100

[pruett]

No proposed solution has worked thus far. Has anyone used a different technique and was succesful?