Html

モーダルがIOSのみを開いているときにボディスクロールを無効にする方法



How Disable Body Scrolling When Modal Is Open Ios Only



解決：

iOS12で動作する次のソリューションを作成しました。

以下の埋め込みデモではBootstrap4を使用していますが、モーダルクラスまたはイベント名に違いがないため、同じソリューションがBootstrap3でも同様に機能します。



ステップ1：固定ポジショニングを使用してモーダルが開いているときにボディが所定の位置にある

ブートストラップモーダルが開かれると、.modal-openがに追加されます体。このクラスに次のスタイルを追加します。



body {＆.modal-open {bottom：0;左：0;位置：固定;右：0;上：0; }}
これで、モーダルが開かれるたびに、ボディは所定の位置に固定され、ビューポート自体と同じ寸法にサイズ設定されます。スクロールする場所や場所がないため、これによりスクロールが完全に防止されます。
 
ただし、これは、モーダルを開くとページが一番上にジャンプすることも意味します。本文がビューポートの下端を超えて伸びることはなくなりました（ページのコンテンツが高いと仮定）。
 
  ステップ2：モーダルが開いている間に前のスクロール距離をシミュレートする  
 
 
 
Bootstrapは、モーダルが開かれたときまたは閉じられたときに発生するイベントを公開します。これらを使用して、「トップへのジャンプ」の問題を解決するには、体 上 モーダルが開かれ、スクロール位置が変更されていないように見える場合：
 
$（function（）{var $ window = $（window）、$ body = $（ 'body'）、$ modal = $（ '。modal'）、scrollDistance = 0; $ modal.on（ 'show.bs。 modal '、function（）{//モーダルが開かれたときのスクロール距離を取得scrollDistance = $ window.scrollTop（）; //ボディの上部をその量だけ引き上げます$ body.css（' top '、 scrollDistance * -1）;}）;}）;
ただし、モーダルを閉じると、ページはトップにジャンプします。のscrollTop値ウィンドウはまだです0。
 
  ステップ3：モーダルが閉じているときにすべてをリセットする  
 
ここで、モーダルが閉じられたときに発生するイベントにフックして、すべてを元の状態に戻す必要があります。
 
     
  • の固定位置と負のトップ値を削除します体
    •  
  • ウィンドウのスクロール位置を元の位置に戻します
    •  
 
$ modal.on（ 'hidden.bs.modal'、function（）{//本体の負のトップ値を削除$ body.css（ 'top'、 ''）; //ウィンドウのスクロール位置を何に戻すかモーダルが開かれる前でした$ window.scrollTop（scrollDistance）;}）;
上の固定位置を手動で削除する必要はありませんボディ、これは.modal-openクラス。モーダルが閉じているときにBootstrapが削除します。
 
 
  デモ  
 
すべてをまとめると、モーダルが開いているときにスクロール位置を失うことなく、iOSでの背景のスクロールを防ぐことができます！
 
iOSデバイスで次のリンクを開きます：https：//daguy.github.io/ios-modal-fix/