web-dev-qa-db-ja.com

モーダルビューが開いているときの本文のスクロールを無効にする

私はこのウェブサイトを作成しています。ヘッダーの2行目の右端にあるリンクをクリックすると、YouTubeビデオが埋め込まれたモーダルウィンドウが表示されます。

モーダルをスクロールすると、BODYもスクロールするので、停止します。どうすればできますか？

助けていただければ幸いです！お時間をいただきありがとうございます。

javascripthtmlcssmodal-dialog
7
Hirohito Yamada

CSSに次のルールを追加します。

body.modal-open { overflow: hidden; }

また、いくつかのjQueryを使用して、モーダルが開いているときに.modal-openクラスを<body>タグに追加し、閉じているときに削除するようにします。

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});
12
IvanJ

これまでに見た他の修正では、モーダルが開かれたときに「BODY」タグに固定位置を適用しようとしていたため、デフォルトではドキュメントが一番上にスクロールされます。 0.これを試してみたところ、最適な解決策は、bodyタグではなくhtmlタグに非表示のオーバーフローを適用することです。このようにして、固定された位置を必要とせず、モーダルが開かれる前の場所にドキュメントを維持することができます。

私が見つけた修正では、次のようなものを適用する必要があるだけです

function openModal(){
   $("html").css({"overflow-y":"hidden"})
   // open your modal box function in this area...
}

それが修正です。先に進んでCSSクラスを作成し、モーダルボックスを開いたり閉じたりするときにHTMLでクラスを切り替えるだけです。しかし、これは確かに私のために問題を解決しました

6
Michael Norward

オーバーフローCSSプロパティを非表示に設定し、位置を固定することで、DOM要素のスクロールを防ぐことができます。例えば：

.disable-scroll {
    /* disable scrollbar on both x and y axis */
    overflow: hidden;

    /* disable scrollbar on x-axis only */
    overflow-x: hidden;

    /* disable scrollbar on y-axis only */
    overflow-y: hidden;

    /* disable scroll */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    /* OPTIONAL: none of dom element will be click-able */
    pointer-events: none;
}
4
ifadey

シンプルなoverflow: hidden;は、ChromeまたはFirefoxではカットされません。position: fixed;を使用すると機能しますが、副作用として、モーダルを閉じるときに画面がジャンプすることがあります。

これにより、両方のスクロールバーが非表示になりますChromeおよびFF

.modal-open {
  -moz-appearance: menuimage;
}

.modal-open::-webkit-scrollbar {
   width: 0 !important;
}

ただし、これはスクロールバーを無効にするだけであり、スクロールはキープレス/テキスト選択/タッチジェスチャーでも可能です。

1つの可能性は、ボディ内の要素の高さをゼロに設定することです。たとえば、すべてのdiv

.modal-open div {
  height: 0px;
}
3
lofihelsinki

ユーザーがスクロールできないように、htmlタグとbodyタグをoverflow: hidden;に設定します。

ただし、モーダルのコンテンツが非常に大きい場合は、モーダル用のスクロール可能なコンテナを用意することをお勧めします。ここで私が話している例を見ることができます： http://fortitude.io/javascript.html#js-modal

3
lifeiscontent