web-dev-qa-db-ja.com

モバイルでのjQueryライブスクロールイベント（回避策）

古い問題：ユーザーがモバイルサイトまたはアプリ（Webビュー）で要素をスクロールしているときにscrollイベントを発生させる。

私が探しているのは、ユーザーがモバイルデバイスでページをスクロールしているときに、ユーザーが停止したときに取得するのではなく、正しいscrollTop()値にアクセスすることだけです。

この制限はiOSによって設定されており、過去数年間にわたってそれについて議論が行われていることを確認した場合、どこかに回避策があると確信しています。

ネイティブスクロールエミュレーターを実装しようとしましたが、どれも私が望むように動作していないようで、正直言って、ユーザーがスクロールしている間に本当に必要なのはscrollTop()だけである場合はやり過ぎのようです。

現在、touchStartでカウンターを開始し、touchStopでカウンターを停止することを考えていますが、時間が無駄になっていることがわかります。

助けてくれる人はいますか？

javascriptjqueryioseventsscroll
47
Franky Chanyau

JQueryの場合：

$('body').bind('touchmove', function(e) { 
    console.log($(this).scrollTop()); // Replace this with your code.
});

これにより、ユーザーがスクロールするときにscrollTop値の一貫したストリームが得られますが、ユーザーが画面上で指を保持している間でも起動するので注意してください。

JQuery> = 1.7を使用している場合、優先バインディング方法は、私の例で使用した.on()メソッドではなく.bind()であることに注意してください。その場合、私の例は

$('body').on({
    'touchmove': function(e) { 
        console.log($(this).scrollTop()); // Replace this with your code.
    }
});

ソース： https://github.com/dantipa/pull-to-refresh-js/blob/master/jquery.plugin.pullToRefresh.js

94
Thanos Siopoudis

多分あなたは iScroll がtouchmoveイベントにバインドされている_move- methodでどのようにそれを行うかを見ることができます： https://github.com /cubiq/iscroll/blob/master/src/core.js#L152

それは少し複雑ですが、あなたはそれを理解するだろうと確信しています。また、iScrollを使用してscrollmoveイベントを開始し、バインドすることもできます（iScroll 5でどのように呼び出されるかわかりませんが、iScroll 4ではonScrollMoveでした）。 that.yは正しい値を提供します。

4
urz0r

これを行うには、iScrollルートに行かなければなりませんでした。ここに実装を書きました： https://stackoverflow.com/a/23140322/229315

1
Melinda Weathers