10

CSS "-webkit-overflow-scrolling：touch"を使用しているときに、iOSでリアルタイムのscrollLeftの位置を取得できません。

これがデモンストレーションするフィドルです：http： //jsfiddle.net/WaMUq/

デスクトップでスクロールしているときに、スクロール中にリアルタイムのscrollLeftデータを取得していますが、iOSでは、勢いのあるスクロールが停止するまで待ってから、scrollLeftデータを送信します。

どうすればこれを回避できますか？このデータをリアルタイムで取得して、とりわけ微妙な視差効果を作成しようとしています。Stellar.jsとScrollability.jsを試しましたが、どちらもスクロールが停止するまで待つという同じ問題が発生します。

4

1 に答える 1

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;」を削除する必要がある場合があります。

于 2012-07-28T10:13:03.527 に答える