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.

Sorry to bump this, but have you ever found a workaround / solution for this? — m90
Same here... I even tried polling scrollTop, but it doesn't even change until the native animation stops. — lakenen
The demo is updating in real-time on iOS for me. How are you testing this? — twhb

Kir Kir · Accepted Answer · 2012-07-28T10:13:03

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;"

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

1 Answers