Real-time Scrolling Events using "-webkit-overflow-scrolling: touch"

Question

While using the CSS "-webkit-overflow-scrolling: touch" I'm not able to get real-time scrollLeft positions while on iOS.

Here's a fiddle to demonstrate: http://jsfiddle.net/WaMUq/

While scrolling on a desktop, I'm getting realtime scrollLeft data while scrolling, whereas on iOS I need to wait until the momentum scrolling has stopped before it sends me the scrollLeft data.

How can I get around this? I'm trying to get this data real-time to create a subtle parallax effect among other things. I've tried Stellar.js and Scrollability.js, and both experience the same issue of waiting until the scrolling has stopped.

Geisel

Sorry to bump this, but have you ever found a workaround / solution for this? – Fimbria

Same here... I even tried polling scrollTop, but it doesn't even change until the native animation stops. – Butyraceous

The demo is updating in real-time on iOS for me. How are you testing this? – Ethno

Answer 1

Here it's works with mouse: http://jsfiddle.net/Kirrr/WaMUq/3/

For touch:

In JS:

$('div.wrap').scroll(function(e){
    $('h4').html( $(this).scrollLeft() );
});

var start_x, wrap_x;
$('div.wrap').bind("touchstart", function(e) {
    e.preventDefault(); // optional. May be it works fine without this
    start_x = e.originalEvent.changedTouches[0].pageX;
    wrap_x = $(this).scrollLeft();
})
$('div.wrap').bind("touchmove", function(e) {
   e.preventDefault(); // optional. May be it works fine without this
   var x = e.originalEvent.changedTouches[0].pageX;
   var result = wrap_x + start_x - x;
   $(this).scrollLeft(result);
})

For touch may have to remove the "-webkit-overflow-scrolling: touch;"

Staurolite

This solution does work, but removes the critical element that I mentioned - "-webkit-overflow-scrolling: touch". I really need the smooth, hardware accelerated elastic scrolling on iOS. – Geisel