CODEWITHSUNDEEP
jquerycssmobileparallaxmomentum
matthoiland
matthoiland

Reputation: 912

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.

Upvotes: 10

Views: 1552

Answers (1)

Kir
Kir

Reputation: 694

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

Upvotes: 1

Related Questions