web-dev-qa-db-ja.com

モーダルダイアログが画面よりも長いときにページをスクロールする方法は？

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

enter image description here

ウィンドウのスクロールバーが表示されたときにダイアログをスクロールし、画面に収まるには長すぎるが、モーダルの背後にある本体をそのままにしておきたい。 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;
}
cssscroll
70
David Tuite

ただ使う

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

モーダルを配置し、垂直スクロールを与えます

157
Amit Kumar Pawar

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

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

EDIT：現在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/
純粋なJSバージョン（IE9 +）： https://jsfiddle.net/0x0049/koodkcng/1/

これは、ページまたはモーダルダイアログの高さまたは幅に関係なく機能し、マウス/指がどこにいてもスクロールできるようにし、メインコンテンツのスクロールを無効にするいくつかのソリューションに含まれる耳障りなジャンプはありません。

32
0x0049

positionを変更

position:fixed;
overflow: hidden;

に

position:absolute;
overflow:scroll;
12
bitoshi.n

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

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

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

更新（その他のデモ）：

ポイントは、外側と内側の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 */
        }
4
Radek Pech

このCSSを追加することでこれを行うことができる簡単な方法ですので、これをCSSに追加しました：

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

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

2
Ashiqur Rahman

ここに..私にぴったり

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

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

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


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

        </body>
</html>
2
Chimdi2000

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

その場合は、max-heightおよびoverflowプロパティを修正してください。

1
o.v.

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

これは私のために動作します。純粋なCSS。

<style type="text/css">

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

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

</style>

試してみてください

0
Hiruyuki Xanada

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

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

0
David Tuite

動的な幅と高さを持つモーダルのこの問題に、純粋な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);
    }
}

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

0
karlludwigweise