Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 552
matthoiland Avatar asked Jul 28 '12 08:07

matthoiland


1 Answers

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

like image 83
Kir Avatar answered Nov 03 '22 07:11

Kir