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

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

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

畫面の高さがビューポートの高さに正確に等しい場合など、これが問題ではない場合があります。しかし、他の場合では、スクロールの問題が発生します。良いニュースは、いくつかの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では、ストッププロパゲーションはタッチイベントで作業(yè)するのが少し厄介です。しかし、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 サイトの他の関連記事を參照してください。