jQuery capture of scroll event on iPad or iPhone not consistent with web browsers

Question

In the site I am building, there is an effect where the top navigation "unlocks" from being a fixed element when you scroll past a certain point. It works very smoothly on my computer. However, on iPad or iPhone, the scroll event, which looks like this:

$(window).on('scroll', function(){...});

...if you flick to scroll the screen, the scrolling happens automatically, and the event doesn't fire until the scrolling comes to a stop. If you move your finger to scroll, the event doesn't fire until you let go. In other words, it does not fire as you move (ie, scroll) the screen.

Is there some way I can capture both the movement of the user's finger as the screen is scrolled, and also as the "inertia" movement is happening? If my script would run when those events happen, the screen should be updated along the way, and it should all happen smoothly like it does on my computer.

I assume this has something to do with iOs. I don't have an Android device to test with... not sure if it is also an issue there or not.

Would appreciate any advice. Thank you!

Answer 1

you could try using the touchmove event instead for mobile users. that way the code runds when they move their finger instead of after they let go.

$(document).on('touchmove', function(){...});

more info here: https://developer.mozilla.org/en-US/docs/Web/Events/touchmove

Answer 2

Like intelligentbean said, you could use the "touchmove" event and listen to it, you could also use touchstart and touchend if you want to do anything special before or after the touch happened.

Also, the jQuery event is also available for touch events, but its not the event passed on the parameter of the listener function, but rather on one of its properties:

$(document).on('touchmove',function(e){
    touchEvent = e.originalEvent.touches[0]; //this is your usual jQuery event, with its properties such as pageX and pageY properties
});