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

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

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

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

簡(jiǎn)単なソリューションから始めます

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

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

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

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

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

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

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

體を解決策として固定した位置に設(shè)定できます。

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

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

おっと！

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

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

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

強(qiáng)化された固定ボディ法

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

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

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

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

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

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

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

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

以上がモーダルが開いているときにページスクロールを防ぎますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。