2

特に iPad で使用するための HTML/JS アプリを設計しています。アプリには、スクロール可能な要素がいくつかあります。

ドキュメントの幅と高さをそれぞれ 1024 と 768 に設定します。ビューポートを

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

次に、クラスを使用します

.scrollable {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

スクロール可能なdivが適切にスクロールするようにします。最後に、JavaScript を少し使用して、スクロール可能な div とリストを許可しながら、ドキュメント自体のオーバースクロールを停止します。

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

//uses body because jquery on events are called off of the element they are
//added to, so bubbling would not work if we used document instead.
$('body').on('touchstart','.scrollable',function(e) {
    if (e.currentTarget.scrollTop === 0) {
        e.currentTarget.scrollTop = 1;
    } else if (e.currentTarget.scrollHeight === e.currentTarget.scrollTop + e.currentTarget.offsetHeight) {
        e.currentTarget.scrollTop -= 1;
    }
});

//prevents preventDefault from being called on document if it sees a scrollable div
$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});

これはすべて機能します-ほとんど。ただし、問題が 1 つあります。スクロール可能な要素にスクロールが必要なほどのコンテンツが含まれていない場合、スクロールしようとすると、ドキュメント全体でオーバースクロールが開始されます。何百ものブログやその他の SO の質問を読みましたが、これに対する解決策が見つかりません。どんなアイデアでも大歓迎です。

4

2 に答える 2

2

スクロールが始まったら、コンテンツの合計サイズを計算し、それをスクロール可能な要素のサイズと比較します。コンテンツが小さい場合は、スクロールを防ぎます。したがって、最後の関数は次のように変更されます

$('body').on('touchmove','.scrollable',function(e) {
    e.stopPropagation();
});

もう少し複雑に

$('body').on('touchmove','.scrollable',function(e) {
    var tot = 0;
    $(this).children('li:visible').each(function() { tot += $(this).height(); });
    if(tot > $(this).innerHeight()) {
        e.stopPropagation();
    }
});

それだけです。

于 2013-05-08T16:50:52.527 に答える
0

スクロールのパフォーマンスが低いことに耐えられる場合は、次の例を試すことができます。

* これを使用してブラウザがバウンスしないようにタッチを防止します * http://gregsramblings.com/2012/05/23/preventing-vertical-scrolling-bounce-using-javascript-on-ios-devices/

var xStart, yStart = 0;
document.addEventListener('touchstart',function(e) {
    xStart = e.touches[0].screenX;
    yStart = e.touches[0].screenY;
});
document.addEventListener('touchmove',function(e) {
    var xMovement = Math.abs(e.touches[0].screenX - xStart);
    var yMovement = Math.abs(e.touches[0].screenY - yStart);
    if((yMovement * 3) > xMovement) {
        e.preventDefault();
    }
});

*これを使用して上下にスワイプすると、独自のスクロールを作成できます*

function init_swipe()
{

    x$("#main_body").swipe(
    function(e, data){
            if (data.direction == 'down')
            {
                var offset=window.scrollY+data.deltaY*100;
                $('html,body').animate({scrollTop: offset},200);
            }
            if (data.direction == 'up')
            {
                var offset=window.scrollY+data.deltaY;
                $('html,body').animate({scrollTop: offset},200);
            }
    }, {
        swipeCapture: true,
        longTapCapture: true,
        doubleTapCapture: true,
        simpleTapCapture: false,
        preventDefaultEvents: false 
    }
    );

}
于 2014-10-08T17:59:37.410 に答える