ブートストラップモーダルはスクロールバーを削除します

ページでモーダルビューをトリガーすると、スクロールバーが非表示になります。モーダルが移動/非表示になると、背景ページが動き始めるので、これは迷惑な効果です。その効果の治療法はありますか？

これは機能であり、モーダルを表示するとクラスmodal-openがHTML bodyに追加され、モーダルを非表示にすると削除されます。

ブートストラップCSSが言うので、これはスクロールバーを非表示にします

.modal-open {
    overflow: hidden;
}

これを指定することでこれを上書きできます

.modal-open {
    overflow: scroll;
}

で独自の CSS。

モーダルを開くと、常にスクロールで開くため、継承はスクロールよりも優れていると思いますが、スクロールがない場合も同じ問題が発生します。だから私はこれをします：

.modal-open {
  overflow: inherit;
}

使った

.modal-open {
  overflow-y: scroll;
}

この場合、水平スクロールバーを表示することを避けます

overflow-y：scrollを使用して本文からパディングを削除し、ページ本体にブートストラップモーダル追加パディングを追加することをお勧めします。

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

IEブラウザー互換： IEブラウザーはデフォルトで同じことを行います。

私はこの投稿に遭遇した神に感謝！私は自分の閉じるリンクを使用してウィンドウを閉じるときに、スクロールバーを元に戻す方法を理解しようとして髪を引っ張っていました。CSSの提案を試しましたが、正しく機能しませんでした。読んだあと

modal-openクラスは、モーダルを表示するとHTMLボディに追加され、モーダルを非表示にすると削除されます。-@flu​​p

私はjqueryを使用したソリューションを思いついたので、他の誰かが同じ問題を抱えており、上記の提案が機能しない場合は-

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

私はこのBootstrapモーダルの「機能」で遊んでいました。思わ.modalクラスが持つoverflow-y:auto;モーダル自体がハイになったときにモーダルラッパーが自分のスクロールバーを取得しますので。

常にスクロールバーが必要な場合（設計者はよく行います）最初に本体を設定します

body {
    overflow-y:scroll;
}

次に処理します .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

この場合、本体のスクロールバーを無効のままにしない

このページの他のすべての答えは私のコンテンツをジャンプさせ続けました。

注意喚起！

このソリューションは常に私にとってはうまくいきましたが、昨日、モーダルがドラッグ可能であり、画面に合わせて（垂直に）大きくなると、この修正を使用するときに問題が発生しました。position:sticky追加した要素と関係があるのでしょうか？

独自のcssファイルを作成して、ブートストラップの特定の部分をカスタマイズする場合は、さらに良い方法です。

ブートストラップのcssファイルを変更しないでください。ページの他の部分で使用すると、ブートストラップのすべてが変更されます。

ページが多少長い場合は、自動的にスクロールバーが表示されます。そして、モーダルを開くと、デフォルトでブートストラップが行うので、スクロールバーが非表示になります。

モーダルが開かれるときに非表示にしないようにするには、CSSコード（下記）を独自のcssファイルに配置してオーバーライドします。

.modal-open {
    overflow: scroll;
}

ちょうどその逆...

.modal-open {
    overflow: hidden;
}

さらに、モーダルポップアップが内部でコンテンツをスクロールする必要があり、親が静止している必要がある場合は、Custom.cssに以下を追加します（cssをオーバーライドします）。

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

ブートストラップモーダルが開くとパディングが追加されるので、独自のCSSでこのコードを試すことができます

.modal-open {
    padding: 0 !important;
}

これはおそらく、1番目のモーダル（閉じたとき）がbody要素からmodal-openクラスを削除し、2番目のトリガーがmodal-openをトリガーしたときに再度追加しないことが原因です。

この場合、イベントを使用してモーダルが完全に閉じられているかどうかを確認し、別のモーダルを開きます

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

これは、最初のモーダルが閉じられるまで待機して、モーダルオープンが本体から削除され、開いたときに再度追加されることを確認します。

私は自分自身でこの問題を抱えていました。この質問を見つけると、行動の原因を理解するのにすぐに役立ちました。ほんとありがと。

しかし、私はこれらのCSSの回避策が少し洗練されていないと感じています。それ以外の場合は、特にスクロールバーを保持したい場合を除きます（ただし、その理由は考えられません）。

本質的にブートストラップは、スクロールバーの削除を補うために特定の要素にパディング権を適用しています。

したがって、必要なのは、問題のある要素の周りにゼロのパディング権を持つ追加のラッパーを配置することです（そして、ターゲットにされているクラスをそれに移動します）。

つまり、これから変更...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

...これに...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>