モーダルダイアログが画面より長い場合、ページをスクロールするにはどうすればよいですか？

82

アプリにモーダルダイアログがあり、y方向にかなり長くなる可能性があります。これにより、ダイアログのコンテンツの一部がページの下部に隠れてしまうという問題が発生します。

ここに画像の説明を入力してください

ダイアログが表示されたときにウィンドウのスクロールバーがダイアログをスクロールし、長すぎて画面に収まらないようにしたいのですが、本体はモーダルの後ろに置いたままにしておきます。Trelloを使用している場合は、私が何をしようとしているのかがわかります。

これは、JavaScriptを使用してスクロールバーを制御しなくても可能ですか？

これまでにモーダルとダイアログに適用したCSSは次のとおりです。

body.blocked {
  overflow: hidden;
}

.modal-screen {
  background: #717174;
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.9;
  z-index: 50;
}

.dialog {
  background: #fff;
  position: fixed;
  padding: 12px;
  top: 20%;
  left: 50%;
  z-index: 10000;
  border-radius: 5px;
  box-shadow: 0, 0, 8px, #111;
}
css  scroll 
— デビッド・チュイテ
ソース
トライオーバーフロー：autoまたはオーバーフロー：ダイアログのスクロール...
— ラクシュミープリヤ

回答:

190

使用するだけ 

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}

それはあなたのモーダルを配置し、それからそれに垂直スクロールを与えます

— アミットクマールパワール
ソース
7
これは受け入れられた答えでなければなりません。エレガントでシンプル。
— brianfit 2016年
2
なぜ210pxを使用する必要があるのですか？その背後に特別な理由はありますか？
— ShellZero 2016
9
@ShellZero、それは次の合計です：モーダルヘッダー、モーダルフッター、モーダルとウィンドウの境界の間の上部と下部のスペース。
— スタリンコ2016
3
フッターとヘッダーの高さをハードコーディングしない解決策はありますか？
— Pavel
2
iOSで通常のスクロールのように感じたい場合は、-webkit-overflow-scrollingを追加します。touch; また、Mobile Safariは、特に指示がない限り、オーバーフロースクロールを通常のページスクロールとは異なる方法で処理するためです。
— Adam Gerthel 2018年
38

これは私のためにそれを修正したものです：

max-height: 100%;
overflow-y: auto;

編集：現在Twitterで使用されているのと同じ方法を使用しています。この方法では、モーダルは現在のコンテンツの上にある別のページのように機能し、モーダルの背後にあるコンテンツはスクロールしても移動しません。

本質的にはこれです：

var scrollBarWidth = window.innerWidth - document.body.offsetWidth;
$('body').css({
  marginRight: scrollBarWidth,
  overflow: 'hidden'
});
$modal.show();

モーダルでこのCSSを使用すると：

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;

JSFiddle：https：//jsfiddle.net/0x0049/koodkcng/
Pure JSバージョン（IE9 +）：https：//jsfiddle.net/0x0049/koodkcng/1/

これは、ページまたはモーダルダイアログの高さや幅に関係なく機能し、マウス/指がどこにあってもスクロールでき、メインコンテンツのスクロールを無効にする不快なジャンプがないため、見栄えもよくなります。

— 0x0049
ソース
これは、OPに対処する唯一の答えです。モーダルが長すぎる場合にページをスクロールする方法。実際にはページをスクロールしませんが、画面の下マージンで垂直方向のスペースを占有したくないというユースケースに適合するページをスクロールしているような錯覚を引き起こします。受け入れられた答えを含む他のすべての解決策には、その問題があります。
— ynot
13

変化する position

position:fixed;
overflow: hidden;

に

position:absolute;
overflow:scroll;
— bitoshi.n
ソース
1
動作しません。恐れ入ります。ダイアログに高さがあることにウィンドウが気付かないようなものです。
— David Tuite 2012年
問題は、position: fixed;それが絶対的なものに変わるのか、それともそうでないのかということです。
— bitoshi.n 2012年
2
そうすると、別の問題が発生します。ユーザーがダイアログを開いたときにすでにページを下にスクロールしている場合は、現在のウィンドウのショットから外れて、ページの最上部に表示されます。
— David Tuite 2012年
1
これは私にとってはうまくいきました-通常のモーダルとモーダルにモーダルがあったときの両方で（Bootstrapは重複するモーダルはサポートされていないと言っています...カスタムコードが必要です）。
— 卵のような2014年
あなたがいないモーダルスクロール、ページをスクロールしているので、これは、実際にはOPに正しい答えである
— carkod
5

これは、コンテンツに合わせて自動サイズ変更し、ウィンドウに収まらないときにスクロールを開始するモーダルウィンドウのデモです。

モーダルウィンドウのデモ（HTMLソースコードのコメントを参照）

すべてHTMLとCSSでのみ実行されます-モーダルウィンドウを表示およびサイズ変更するためにJSは必要ありません（ただし、もちろんウィンドウを表示するためにJSは必要です-新しいバージョンではJSはまったく必要ありません）。

更新（その他のデモ）：

重要なのは、外側と内側のDIVがあり、外側のDIVが固定位置を定義し、内側のDIVがスクロールを作成することです。（デモでは、実際のモーダルウィンドウのように見せるために実際にはさらに多くのDIVがあります。）

        #modal {
            position: fixed;
            transform: translate(0,0);
            width: auto; left: 0; right: 0;
            height: auto; top: 0; bottom: 0;
            z-index: 990; /* display above everything else */
            padding: 20px; /* create padding for inner window - page under modal window will be still visible */
        }

        #modal .outer {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 999;
        }

        #modal .inner {
            box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box;
            width: 100%;
            height: auto;       /* allow to fit content (if smaller)... */
            max-height: 100%;   /* ... but make sure it does not overflow browser window */

            /* allow vertical scrolling if required */
            overflow-x: hidden;
            overflow-y: auto;

            /* definition of modal window layout */
            background: #ffffff;
            border: 2px solid #222222;
            border-radius: 16px; /* some nice (modern) round corners */
            padding: 16px;       /* make sure inner elements does not overflow round corners */
        }
— ラデクペック
ソース
ポップアップが開いたら、スクロールを防ぐためにページをロックできますか？ユーザーがポップアップの外側にマウスを持っている場合、彼はポップアップの代わりにページをスクロールし、それが発生してポップアップの上に移動すると、ポップアップとページのスクロールが表示されます。ありがとう
— Adyyda 2016年
@Adyyda DIVでページをラップし、overflow:hiddenそのサイズをページと同じに設定し、そのサイズをそのmargin-top負に設定することで、スクロールを停止できますscroll-top。
— Radek Pech 2016年
これは、Radekの優れた適切なソリューションでした。レスポンシブなクロスブラウザで、CSSを使用するだけで済みました。時間を節約できました、ありがとう
— Tremendus Apps 2016
@RadekPechそれは何をするのとどう違うのhtml,body{ overflow:hidden }ですか？
— Steven Vachon 2016年
@StevenVachonデモのように単純で、サポートされているブラウザの数が限られているページでは、違いがない場合があります。ただし、より複雑なページや特定のブラウザ設定html,body{ overflow:hidden }では、期待どおりに機能しない場合があります。したがって、それはやり過ぎのように見えるかもしれませんが、申し訳ありませんよりも安全です。
— Radek Pech 2016年
2

固定配置だけでその問題を修正できるはずですが、この問題を回避するためのもう1つの適切な回避策は、サイトレイアウト内ではなくページの下部にモーダルdivまたは要素を配置することです。ほとんどのモーダルプラグインは、ユーザーがメインページをスクロールし続けることができるように、モーダルポジショニングを絶対的に提供します。

<html>
        <body>
        <!-- Put all your page layouts and elements


        <!-- Let the last element be the modal elemment  -->
        <div id="myModals">
        ...
        </div>

        </body>
</html>
— Chimdi2000
ソース
2

ここで..私にとって完璧に動作します

.modal-body { 
    max-height:500px; 
    overflow-y:auto;
}
— Evans Kwachie
ソース
2

このcssを追加することでこれを行う簡単な方法だから、これをCSSに追加しただけです。

.modal-body {
position: relative;
padding: 20px;
height: 200px;
overflow-y: scroll;
}

そしてそれは働いています！

— Ashiqur Ra​​hman
ソース
1

position:fixedこれは、モーダルウィンドウが視点に対して固定されたままになることを意味します。このシナリオでは適切であるというあなたの評価に同意します。そのことを念頭に置いて、モーダルウィンドウ自体にスクロールバーを追加しないのはなぜですか。

もしそうなら、正しいmax-heightとoverflowプロパティがトリックを行う必要があります。

— ov
ソース
0

結局、モーダル画面の背後にあるページのコンテンツを変更して、ページをスクロールするのに十分な長さがないようにする必要がありました。

これを行うposition: absoluteと、ユーザーがページを下にスクロールできなくなったため、ダイアログに適用するときに発生した問題が解決されました。

— デビッド・チュイテ
ソース
問題をスキップしました
— Amit Kumar Pawar 2017年
あなたによる質問と回答の両方の投稿とあなたもあなたの回答を受け入れます、それならなぜあなたはここに質問を投稿するのですか？
— Thiyagu 2017
2
OKと思われる@Thiyagu。質問者が解決策を見つけた場合は、質問者自身が回答を投稿する必要があります。彼らはまた、彼らを助けた答えを自由に受け入れることができます。最終目標は、コミュニティ全体を支援することです。
— バグ2017
0

モーダルが開いているときにクリック可能なウィンドウページのスクロールバー

これは私のために働きます。純粋なCSS。

<style type="text/css">

body.modal-open {
padding-right: 17px !important;
}

.modal-backdrop.in {
margin-right: 16px; 

</style>

それを試して、私に知らせてください

— 雪田ひるゆき
ソース
-1

動的な幅と高さを持つモーダルのこの問題に、純粋なCSSの答えを追加したいと思いました。次のコードは、次の要件でも機能します。

  1. 画面の中央にモーダルを配置します
  2. モーダルがビューポートよりも高い場合は、調光器をスクロールします（モーダルコンテンツではありません）

HTML：

<div class="modal">
    <div class="modal__content">
        (Long) Content
    </div>
</div>

CSS / LESS：

.modal {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @qquad;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.7);
    z-index: @zindex-modal;

    &__content {
        width: 900px;
        margin: auto;
        max-width: 90%;
        padding: @quad;
        background: white;
        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75);
    }
}

このようにして、モーダルは常にビューポート内にあります。モーダルの幅と高さは、好きなだけ柔軟です。簡単にするために、これから閉じるアイコンを削除しました。

— karlludwigweise
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.