web-dev-qa-db-ja.com

モーダル内のコンテンツのスクロールを有効にする方法は？

Twitter Bootstrapを使用して作成されたモーダルボックスに多くのテキストを収めようとしていますが、問題があります。そのコンテンツはスクロールを拒否します。

overflow:scrollとoverflow-y:scrollを追加しようとしましたが、役に立ちませんでした。実際にスクロールを有効にせずにスクロールバーを表示するだけです。

その背後にある原因は何ですか、私は何ができますか？

csstwitter-bootstrapscroll
72
user798204

Bootstrap.cssで、Modalの背景属性（position）をfixedからabsoluteに変更します

63
jktress

Bootstrap 3では、css class .modalを変更する必要があります

before（ブートストラップのデフォルト）：

.modal {

    overflow-y: auto;
}

編集後）：

.modal {

    overflow-y: scroll;
}
44
Philipp Wirth

この回答には、実際には2つの部分、UX警告、および実際の解決策。

UX警告

モーダルにスクロールする必要があるほど多く含まれている場合は、モーダルを使用する必要があるかどうかを自問してください。 bootstrapモーダルのサイズは、デフォルトでは、視覚情報がどれだけ収まるかに関してかなり良い制約です。作成している内容に応じて、代わりに新しいページまたはウィザードを選択できます。

実際の解決策

ここにあります： http://jsfiddle.net/ajkochanowicz/YDjsE/2/

このソリューションでは、.modalの高さを変更し、必要に応じて、垂直スクロールバーで.modal-bodyに残りのスペースを占有させることもできます。

UPDATE

Bootstrap 3では、オーバーフローするコンテンツをより適切に処理するためにモーダルがリファクタリングされていることに注意してください。ビューポートの下を流れるように、モーダル自体を上下にスクロールできます。

17
Adam Grant

モーダルオーバーレイで完全なスクロールを得るには、モーダル全体ではなくmodal-bodyの高さを設定します。私は次のように動作します：

.MyModal {
    height: 450px;
    overflow-y: auto;
}

ここで、要件に従って高さを設定できます。

4
Ravindra

正しく思い出すと、bodyでoverflow：hiddenを設定しても、モバイルサイト用に構築したモーダルライブラリ用にテストしていたすべてのブラウザーで機能しませんでした。具体的には、overflow：hiddenをボディに配置しても、モーダルスクロールに加えてボディがスクロールしないようにするのに問題がありました。

現在のサイトでは、このようなことをしました。基本的には、ページ本体で「オーバーフロー」を「非表示」に設定するだけでなく、現在のスクロール位置を保存し、モーダルが閉じた後にスクロール位置を復元します。既にアクティブになっているときに別のbootstrapモーダルが開くときの条件があります。それ以外の場合、コードの残りは自明である必要があります。ボディのoverflow：hiddenが、特定のブラウザでウィンドウのスクロールを妨げない場合、少なくとも終了時に元のスクロール位置を元に戻すことに注意してください。

function bindBootstrapModalEvents() {
    var $body = $('body'),
        curPos = 0,
        isOpened = false,
        isOpenedTwice = false;
    $body.off('shown.bs.modal hidden.bs.modal', '.modal');
    $body.on('shown.bs.modal', '.modal', function () {
        if (isOpened) {
            isOpenedTwice = true;
        } else {
            isOpened = true;
            curPos = $(window).scrollTop();
            $body.css('overflow', 'hidden');
        }
    });
    $body.on('hidden.bs.modal', '.modal', function () {
        if (!isOpenedTwice) {
            $(window).scrollTop(curPos);
            $body.css('overflow', 'visible');
            isOpened = false;
        }
        isOpenedTwice = false;
    });
}

これが気に入らない場合は、他のオプションとしてmax-heightとoverflow：autoを.modal-bodyに割り当てます：

.modal-body {
  max-height:300px;
  overflow:auto;
}

この場合、さまざまな画面サイズに対してmax-heightを構成し、さまざまな画面サイズに対してoverflow：autoを残すことができます。ただし、モーダルヘッダー、フッター、および本文が画面サイズを超えないようにする必要があるため、その部分を計算に含めます。

4
Daniel

SkrollrでBootstrapモーダルを使用すると、モーダルはスクロールできなくなります。

タッチイベントの伝播を停止する問題が修正されました。

$('#modalFooter').on('touchstart touchmove touchend', function(e) {
    e.stopPropagation();
});

詳細は ＃skrollr-body内の要素にスクロールイベントを追加

2
ken

これは私が純粋にCSSでいくつかのクラスをオーバーライドした方法です：

.modal {
  height: 60%;

  .modal-body {
    height: 80%;
    overflow-y: scroll;
  }
}

お役に立てば幸いです。

2
Alejandro García Iglesias

実際、Bootstrap 3の場合は、bodyの.modal-openクラスもオーバーライドする必要があります。

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
1
Jmorvan

私は同じ問題を抱えていて、以下のような修正を見つけました：

$('.yourModalClassOr#ID').on('shown.bs.modal', function (e) {
    $(' yourModalClassOr#ID ').css("max-height", $(window).height());
    $(' yourModalClassOr#ID ').css("overflow-y", "scroll");          /*Important*/
    $(' yourModalClassOr#ID ').modal('handleUpdate');

});

100％働きます。

1
Amin Bakhtiari Far
.modal-body {
    max-height: 80vh;
    overflow-y: scroll;
}

それは私のために働く

1
Ivan Komarov

IPhone6のMobile Safariでこの問題が発生しています

ブートストラップは、モーダルが開かれたときにクラス.modal-openを本体に追加します。

Bootstrap 3.2.0に最小限のオーバーライドを試みましたが、次のように思いつきました。

.modal-open {
    position: fixed;
}

.modal {
    overflow-y: auto;
}

比較のために、関連するBootstrapスタイルを以下に含めました。

Bootstrap/less/modals.lessから選択した抽出（修正にこれを含めないでください）：

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

使用されているモバイルSafariバージョン：User-Agent Mozilla/5.0 (iPhone; CPU iPhone OS 8_1 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12B411 Safari/600.1.4

1
ptim

上記のすべてのソリューションを使用した後、マウススクロールを使用してスクロールすることができず、コンテンツをスクロールするためにキーボードの上下ボタンが機能していました。

だから私はそれを動作させるためにCSSの修正を以下に追加しました

.modal-open {
    overflow: hidden;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
    **pointer-events: auto;**
}

pointer-events：auto;を追加して、マウスをスクロール可能にしました。

0
Ritesh Kashyap

ブートストラップは、モーダルを開いたり閉じたりするときに、CSS "modal-open"を<body>タグに追加または削除します。したがって、複数のモーダルを開いてから任意のモーダルを閉じると、モーダルオープンCSSがbodyタグから削除されます。

ただし、スクロール効果は、"overflow-y: auto;"で定義されたmodal-open属性に依存します

0
Nick

.modal-body要素のmax-heightで「vh」​​メトリックを使用することにより、これを克服できました。 70vhは私の用途に適しているように見えました。

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
0
Keith.Abramo