モーダルが開いているときにページスクロールを防ぎます

モーダルボックスが開いたときにページスクロールを防ぎます

この状況に遭遇したことがあります。モーダルボックスを開き、スクロールして閉じて、ページが別の場所にジャンプしますか？

これは、モーダルボックスがページ上の単なる要素であるため、配置されている可能性があるためですが、ページの残りの部分はまだ適切に機能しています。

画面の高さがビューポートの高さに正確に等しい場合など、これが問題ではない場合があります。しかし、他の場合では、スクロールの問題が発生します。良いニュースは、いくつかのCSS（およびJavaScript）のトリックでこれを防ぐことができるということです。

簡単なソリューションから始めます

体全体の高さを完全なビューポートの高さに設定し、モーダルボックスが開いたときに垂直オーバーフローを隠すことにより、モーダルボックスが開くと、ページスクロールの問題を大幅に軽減できます。

 <code>body.modal-open { height: 100vh; overflow-y: hidden; }</code>

これは良いことですが、モーダルボックスを開く前にページ要素をスクロールした場合、わずかな水平方向の再配列があります。ビューポート幅は約15ピクセル増加します。これは、まさにスクロールバーの幅です。これを避けるために、体の右の詰め物を少し調整しましょう。

 <code>body { height: 100vh; overflow-y: hidden; padding-right: 15px; /* 避免宽度重排*/ }</code>

モーダルボックスの高さは、この方法が機能するためのビューポートの高さよりも少ない必要があることに注意してください。それ以外の場合、ボディのスクロールバーが必要になります。

モバイルで何をしますか？

このソリューションは、デスクトップとAndroidモバイルの両方でうまく機能します。ただし、iOS Safariは、タッチスクリーンをクリックして移動するときにモーダルボックスが開くときにボディがまだスクロールするため、より多くの処理が必要です。

体を解決策として固定した位置に設定できます。

 <code>body { position: fixed; }</code>

今は大丈夫です！画面に触れると、体は反応しません。ただし、ここにはまだ「小さな」問題があります。モーダルボックストリガーがページの下部にあると仮定すると、クリックして開きます。とても良い！しかし、これで自動的に画面の上部までスクロールします。これは、解決しようとしているスクロール動作と同じくらい混乱しています。

おっと！

したがって、JavaScriptを使用する必要があります

JavaScriptを使用して、タッチイベントのバブルを回避できます。私たちは皆、モーダルボックスが開いたときに背景層があるべきであることを知っています。残念ながら、iOSでは、ストッププロパゲーションはタッチイベントで作業するのが少し厄介です。しかし、DeftedEfaultは非常にうまく機能します。これは、背景やモーダルボックスレイヤーだけでなく、モーダルボックスに含まれる各DOMノードにイベントリスナーを追加する必要があることを意味します。良いニュースは、実績のあるjQueryを含め、多くのJavaScriptライブラリがこれを行うことができることです。

もう1つ：モーダルボックスの内側をスクロールする必要がある場合はどうなりますか？タッチイベントへの応答をトリガーする必要がありますが、モーダルボックスの上部または下部に到達したときに泡を止める必要があります。これは非常に複雑に思えるので、問題を完全に解決していません。

強化された固定ボディ法

私たちが使用しているのは：

 <code>body { position: fixed; }</code>

スクロールの最上位の位置を知っていて、CSSに追加すると、ボディは画面の上部にスクロールしないため、問題は解決します。 JavaScriptを使用してスクロールトップを計算し、その値をボディスタイルに追加できます。

 //モーダルボックスが表示されるとき、固定ボディが必要です
document.body.style.position = 'sixt';
document.body.style.top = ` -  $ {window.scrolly} px`;

//モーダルボックスが非表示になったら、スクロール位置document.body.style.position = ''の上部に保持する必要があります。
document.body.style.top = '';

これは機能しますが、モーダルボックスが閉じた後も少し漏れがあります。具体的には、モーダルボックスが開いてボディが固定されるように設定されている場合、ページはスクロール位置を失ったようです。そのため、場所を取得する必要があります。 JavaScriptを変更して、この問題を解決しましょう。

 //モーダルボックスが隠されているとき...
const scrolly = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollto（0、parseint（scrolly || '0'） * -1）;

ばっちり成功！モーダルボックスが開いているときはボディがスクロールせず、モーダルボックスが開いて閉じているときにスクロール位置に残ります。ロングライブ！

以上がモーダルが開いているときにページスクロールを防ぎますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。