jquery - 使用“-webkit-overflow-scrolling: touch”的实时滚动事件

Question

在使用 CSS“-webkit-overflow-scrolling: touch”时，我无法在 iOS 上获得实时的 scrollLeft 位置。

这是一个要演示的小提琴：http: //jsfiddle.net/WaMUq/

在桌面上滚动时，我会在滚动时获取实时 scrollLeft 数据，而在 iOS 上，我需要等到动量滚动停止后再向我发送 scrollLeft 数据。

我怎样才能解决这个问题？我正在尝试实时获取这些数据，以创建微妙的视差效果。我已经尝试过Stellar.js和Scrollability.js，并且都遇到了等待滚动停止的相同问题。

Answer 1

它适用于鼠标：http: //jsfiddle.net/Kirrr/WaMUq/3/

对于触摸：

在 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);
})

对于触摸可能要去掉“-webkit-overflow-scrolling:touch;”