iPadは文書のスクロールを無効にしますが、オーバーフローのスクロールは行いません。

Question

私はモーダルウィンドウを開発しています。彼らが発砲されたときには、モーダルボックスコンテナのbodyとoverflow: autoにoverflow: hiddenを定義します。これはデスクトップブラウザではうまくいきますが、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

は、事前にありがとうございます！

Answer 1

小さな変更は強力です！

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

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

私はこの質問が誰かにとって有用であることを願っています。