How to capture scroll start event on iPhone/Android

Question

I'm using JQuery with a mobile site to reposition the header nav on scroll in the absence of position:fixed support. That works fine, when the user stops scrolling the header is placed back at the top of the page.

To enhance the experience for the user I want to hide() the header when the user starts to scroll and then have it slide in when they stop. The problem is that the scroll event only fires when the user stops scrolling. I've read that there are iOS specific touch events but is there any way I can capture a scroll start event on iOS and Android using mutually common code?

Thanks

Solution 1

I believe jQuery Mobile, can do this. Take a look at the following code:

$(document).bind("scrollstop", function() {

//What occurs when the scrolling stops
alert("You have stopped scrolling");
});

$(document).bind("scrollstart", function() {

//What occurs when the scrolling starts
alert("You have started scrolling");

});

Solution 2

You can start with jQuery Touchwipe : it's a plugin which add new events, wipeleft and wiperight.

It can be easily modified to change horizontal wipes to vertical ones (changing x's to y's) http://plugins.jquery.com/project/Touchwipe-iPhone-iPad-wipe-gesture

It works on Android, IOS and BBOS.

Comments

[Marcus]

Thanks, I should have thought of this, I can use some other JQuery mobile features on the site too.

[Marcus]

I didn't know about this, will come in useful in future. Going to go with JQuery Mobile for this one though, I can use some of its other features.

[Marcus]

Actually, just to note, iOS doesn't allow any DOM manipulation after a scroll has started until it has stopped. So you can't remove the header on scrollstart unfortunately.