1

左スワイプと右スワイプのジェスチャを使用してタッチデバイス上のオブジェクトを切り替えるギャラリーを作成しています。ユーザーがスワイプしようとしているように見える場合はページスクロールを無効にし、ユーザーが望んでいることが明らかになった場合はページスクロールを有効にする必要があります。

より良いスワイプ体験を可能にするためにページスクロールを無効にすることはかなり簡単です。preventDefault()将来使用するために座標を使用して保存します。

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

};

問題は、ユーザーが特定の許容範囲を超えたときにスクロールを再開できることです。主な難しさは、同じタッチイベント中にこれを行うことです。

これは私がそれを機能させるために来た最も近いものですが、それはぎくしゃくしたスクロールをもたらし、（潜在的に）ユーザーがURLバーを見ることができないようにします：

this.touchMove = function( event )
{
    event.preventDefault();

    this.finalCoord.x = event.targetTouches[0].pageX;
    this.finalCoord.y = event.targetTouches[0].pageY;

    var changeY = this.originalCoord.y - this.finalCoord.y;

    if (changeY > this.config.threshold.y || changeY < ( this.config.threshold.y * -1 ) )
    {
        var move = window.pageYOffset + changeY;

        window.scrollTo( 0, move );
    }
};

私が試したがうまくいかなかったこと：

  1. 条件付きで呼び出しpreventDefault()ます。これは最も明白でしたが、残念ながら、preventDefaultが呼び出されると、それを無効にする方法はないようです。
  2. を使用しstopPropigation()ます。これにより、ページのスクロールが妨げられることはありません。
  3. を使用しreturn falseます。これにより、ページのスクロールが妨げられることもありません。
  4. 3DCSS変換を使用してスクロールを実行します。実際、これには潜在的な可能性がありますが、頭痛を誘発する行動も引き起こします。
  5. divイベントをハイジャックするために透明なオーバーレイを追加します。作品の追加はdiv問題なく機能しますが、イベントを乗っ取るわけではありません。

私がやろうとしていることを達成する方法はありますか？

4

1 に答える 1

0

別の質問に対するこのコメントからtouchSwipeプラグインを見つけました。そのコードを見ると、それは私が適用しようとしていた方法の論理的な問題のようです。preventDefault()

いずれにせよ、プラグインは私のニーズに完全に対応しています。

于 2012-05-17T13:56:50.847 に答える