0

数日間ネットを検索していますが、問題の解決策が見つかりません。私はモバイル サイトを構築しています。そこには、指をスワイプして水平方向にスクロールできる要素があります。これまでのところ、これはうまく機能します。

スワイプ中にページが垂直方向にスクロールされないようにするために、event.preventDefault() を touchmove イベントに追加しました。ここに問題があります。ユーザーがこの要素を垂直にスワイプしながらページをスクロールできるようにしたいのですが、60 ピクセル (垂直) としましょう。これどうやってするの？私が使用したコードでは、「else」(スクロール長が 70px を超える場合) が実行されますが、スクロールは行われません。私がやりたいことは可能ですか?その場合はどうすればよいですか?

ここに私が試したコードがあります：

$(Carousel_Wrapper).bind('touchstart', function(event) 
{
    // Some other stuff happens here

    // Set last y-coord
    Carousel_LastPageY = event.originalEvent.touches[0].pageY;

    // Bind the touchmove event
    $(Carousel_Wrapper).bind('touchmove', function(event) 
    {
        // The function which scrolls the content of the element
        Carousel_Drag(event.originalEvent.touches[0].pageX, event);

        // Calculate the vertical swipe length
        var Carousel_VerticalSwipeLength = event.originalEvent.touches[0].pageY - Carousel_LastPageY;

        // Convert to a positive value
        if(Carousel_VerticalSwipeLength < 0)
        {
            Carousel_VerticalSwipeLength = Carousel_VerticalSwipeLength * -1;
        }

        // If the vertical scroll-length is less than 70px
        if(Carousel_VerticalSwipeLength < 70)
        {
            event.preventDefault();
        }

        // The scroll-length was more than 70px, resume scrolling
        else
        {
            // I've tried this:
            return true;

            // Then this:
            $(Carousel_Wrapper).unbind('touchmove');

            // And at last this:
            $(Carousel_Wrapper).unbind('touchmove');
            $(Carousel_Wrapper).trigger('touchmove');
        }
    });
});

どんな助けでも大歓迎です！

ありがとう、ヘンリック

4

1 に答える 1

0

変数には、タッチの違いの合計を格納する必要があります。あなたの変数は、それらの合計ではなく、各差分の量のみを調べているように見えます。

于 2012-05-11T08:32:07.933 に答える