jQuery live scroll event on mobile (work around)

Question

The age old problem: Getting the scroll event to fire while a user is scrolling on an element while on a mobile site or app(web view).

All I\'m looking for is access

Answer 1

maybe you could take a look at how iScroll does it in their _move-method which is bound to the touchmove event: https://github.com/cubiq/iscroll/blob/master/src/core.js#L152

It's a bit complicated but i'm sure you'll figure it out. You could also just use iScroll to begin with and bind to their scrollmove event (I'm not sure how it's called on iScroll 5 but it was onScrollMove in iScroll 4). that.y will then give you the correct value.

Answer 2

I had to go the iScroll route to do this. I wrote up my implementation here: https://stackoverflow.com/a/23140322/229315

Answer 3

With jQuery:

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

This should give you a consistent stream of the scrollTop value when the user scrolls, but be careful as it's going to fire even while the user is just holding his finger on the screen.

Note that if you're using jQuery >= 1.7 the preferred binding method is .on() instead of the .bind() method I've used in my example. In that case my example would be

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

Source: https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js