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

时间:2012-07-28 08:39:07

标签: jquery css mobile parallax momentum

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

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

在桌面上滚动时,我在滚动时获得实时scrollLeft数据,而在iOS上我需要等到动量滚动停止后才向我发送scrollLeft数据。

我该如何解决这个问题?我正在尝试实时获取这些数据,以创造一种微妙的视差效果。我已经尝试了Stellar.jsScrollability.js,两者都遇到了同样的问题,等待滚动停止。

1 个答案:

答案 0 :(得分:0)

这里适用于鼠标: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;”