75

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

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

その背後にある原因は何ですか?どうすればよいですか?

4

16 に答える 16

62

Bootstrap.csspositionで、Modal の background 属性 ( ) を からfixedに変更します。absolute

于 2011-10-16T22:46:10.913 に答える
18

この回答には、実際には、UX 警告と実際の解決策の 2 つの部分があります。

UX 警告

モーダルにスクロールが必要なほど多くの要素が含まれている場合は、モーダルを使用する必要があるかどうか自問してください。デフォルトでのブートストラップ モーダルのサイズは、どのくらいの視覚情報が収まるかについてのかなり適切な制約です。作成する内容によっては、代わりに新しいページまたはウィザードを選択することもできます。

実際のソリューション

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

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

アップデート

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

于 2012-05-23T12:59:57.540 に答える
4

これは、一部のクラスをオーバーライドする CSS で純粋に行った方法です。

.modal {
  height: 60%;

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

お役に立てば幸いです。

于 2012-01-23T19:15:10.443 に答える
2

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

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

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

詳細については、 スクロール イベントを #skrollr-body 内の要素に追加するを参照してください。

于 2014-10-04T13:18:35.007 に答える
1

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

$('.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% 稼働しています。

于 2016-04-08T06:41:06.330 に答える
1

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

    body.modal-open, 
    .modal-open 
    .navbar-fixed-top, 
    .modal-open 
    .navbar-fixed-bottom {
     margin-right: 15px; /*<-- to margin-right: 0px;*/
    }
于 2013-10-16T23:43:35.460 に答える
0

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

.modal-body {
   overflow-y: auto;
   max-height: 70vh;
}
于 2016-10-25T13:21:47.260 に答える
0

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

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

于 2016-09-25T08:15:53.270 に答える
0

これらのすべての解決策を使用した後、マウススクロールを使用してスクロールできず、キーボードの上下ボタンがコンテンツのスクロールに機能していました。

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

.modal-open {
    overflow: hidden;
}

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

pointer-events: auto; を追加しました。マウスでスクロールできるようにします。

于 2016-07-14T05:01:58.780 に答える
-2

解決策 1 : 3v 未満のブートストラップを使用している場合は宣言できます (上位バージョンの場合は既に宣言されています) .modal{ overflow-y:auto}。.modal-open .modal{ overflow-y:auto}

ブートストラップは、モーダルが表示modal-openされている場合にスクロールバーを削除するためにクラスを追加しますが、スクロールバーを持つことができるクラスbodyを追加しません。イベントを非表示にして追加/削除します。ここでこれを行う方法。htmlhtml overflow:hiddenhtml

$('.modal').on('hidden.bs.modal', function () {
   $('html').css('overflow','auto');
}).on('shown.bs.modal', function () {
   $('html').css('overflow','hidden');
});

解決策2：モーダルには機能キーがあるため、これを処理する最良の方法は、高さを固定するか、モーダルの高さとビューポートの高さを次のように接続することです-

.modal-body {
     overflow:auto; 
     max-height: 65vh;
}

bodyこの方法を使用すると、htmlスクロールバーを処理する必要もありません。

注 1 :ユニットのブラウザサポート。vh

注 2 :上で提案されているとおり。に変更.modal{position:fixed}して.modal{position:absolute}も、ページの高さがモーダル ユーザーよりも大きい場合、ユーザーが上にスクロールしすぎて、モーダルがビューポートから消えると、ユーザー エクスペリエンスが低下します。

于 2015-03-19T07:33:06.080 に答える