13

scrollTopドキュメントの高さの半分よりも低い場合は位置を検出し、ページの上部にscrollTopスクロールするか、そうでない場合は下部にスクロールするモバイルデバイス用のページを作成しようとしています。

私はこれを使用してそれを達成しました:

var ScrollTimeout;
$(window).on('scroll',function(){
    clearTimeout(ScrollTimeout);
    ScrollTimeout = setTimeout(scrollToTopOrBottom,200);
    });

問題は、ユーザーがスクロールを停止しても指が画面上にあるときにタイムアウトが発生することです。

それから私はtouchendイベントで働きました、そしてそれは素晴らしかったです.

$(document).on('touchend',function(){
    scrollToTop();
    });

ユーザーは (指を画面に置いたまま) スクロールを停止し、scrollToTopOrBottom()関数をトリガーせずにスクロールを続けることができます。

問題は、ブラウザ間でイベントに一貫性がないことです。

一部のブラウザー (Maxthon および Android) では、touchendイベントは意図したとおりに機能しましたが、Opera Mobile および Chrome では、touchendイベントは発生しません。これの説明は、以前にtouchend発火したため、発火しないということtouchcancelです。

私はこれを試しました

$(document).on('touchmove',function(e){
    e.preventDefault();
    });

のトリガーを回避することに成功しましたtouchcancelが、不運にもスクロールの自然な動作も回避しました。

これをどのように達成できるか知っている人はいますか？私は完全にアイデアがありません。

ありがとう。

4

2 に答える 2

20

touchend と touchcancel の両方にリスナーをアタッチしてみてください。

$(document).on('touchend touchcancel', function() {
    doSomthing();
});
于 2014-02-14T13:48:14.617 に答える