How can I monitor scroll position while scrolling in Safari on iOS?

Question

I currently use $(window).bind(\'scroll\', foo); to monitor $(window).scrollTop() and do stuff to create a parallax effect.

In all desktop brow

Answer 1

While this isn't possible out of the box, so to speak, you can do it using iscroll

So, you'd use iScroll for iOS and Android mobile devices / tablets, and use the way you're currently doing it for desktop devices.

iScroll has a bunch of options for callback functions to be called on certain events - such as 'onScrollMove', 'onBeforeScrollEnd', 'onTouchEnd', etc. Unfortunately, there's not an option to execute a callback on "EVERY position change, including changes cause by the momentum of scrolling after the user has stoped touching the screen". But, it's easy enough to add one.

In the iScroll source, around line 127, near the "//Events" comment, add a new variable:

onPosChange: null

Then, around line 308, at the end of the "_pos" function, add this line:

if (this.options.onPosChange) this.options.onPosChange.call();

(that will just call the function passed in the "onPosChange" option, if it exists).

Having done that, the following example code will set up iScroll for the div with id="iscroll_container", and will print the Y-offset to the console each time it changes:

var myScroll;
function loaded() {
    myScroll = new iScroll('iscroll_container', { onPosChange: actOnScroll });
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

//Use this for high compatibility (iDevice + Android)
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);

function actOnScroll(){
    console.log('got a scroll move! Vert offset is: ' + myScroll.y);
}

Note, Ben the Bodyguard Parallax Site works on iPad by using iScroll (they use a much older version of iscroll and don't do it exactly the way I described here)

Also, Life of Pi Parallax Site works on iPad really nicely - I can't figure out how they do it, but at least it proves it's possible!