6

ピンタレストのように、スクロール可能なモーダル ウィンドウを開発しています。それらが起動されると、モーダル ボックス コンテナーのoverflow: hiddenonbodyとon を定義します。overflow: autoこれはデスクトップ ブラウザーでは非常にうまく機能しますが、iPad での最初のテスト (おそらく iOS ではおそらく一般的だと思います) で問題が明らかになりました。

モーダルのスクロールが終了すると、ドキュメントがモーダルよりも長い場合、スクロールが続行されます。

モーダルまたはそのコンテナーによってトリガーされた場合にのみスクロールを受け入れることを意図して、これを試しました。

// Disable browser scrolling on iOS
$(document).on('touchmove',function(e) {
    if (($(e.target).attr('id') != id) &&
    ($(e.target).attr('id') != ('modal-'+id))) {
        e.preventDefault();
    }
});

そして、厳密にそれを行うことは本当に機能します。モーダルはスクロールし、スクロールが終了すると、モーダル内をスクロールした場合にのみページが可能になります。

何か考えはありますか？

必要に応じて iPad で試してみてください (モーダル ボタンをクリックする必要があります): http://www.onebigrobot.com/beta/altair/transforms-so

前もって感謝します！

4

1 に答える 1

7

小さな変化が力になる！

すべての問題は、モーダル コンテナー (および必要に応じて背景のダーク マスク) を変更position: absoluteすることで解決されます。position: fixed実際、ボタンがページの上部にあったため、絶対配置ではモーダルのみが機能しました。

固定位置のデスクトップ ブラウザーは完全に機能し、iPad では興味深いことが起こります。モーダルのスクロールが終了すると、ページのスクロールが機能し始めますが、モーダルは常に上に配置されます。

この質問が誰かの役に立つことを願っています。

于 2012-05-15T11:28:03.597 に答える