10

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
matthoiland
  • 912
  • 11
  • 24

1 Answers1

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

Kir
  • 694
  • 4
  • 7
  • 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. – matthoiland Jul 29 '12 at 03:55