如何在Bootstrap模式中启用滚动内容？
我试图将大量的文本放入使用Twitter Bootstrap创build的模式框中，但是我遇到了问题：内容拒绝滚动。 我试图添加overflow:scroll和overflow-y:scroll但无济于事; 这只会导致它显示一个滚动条，而不会实际启用滚动。
这背后的原因是什么，我该怎么办？
在Bootstrap.css中，将Modal的背景属性（ position ）从fixed改为absolute
在Bootstrap 3中，你必须改变css类.modal
之前：
.modal { overflow-y: auto; }
后：
.modal { overflow-y: scroll; }
这个答案实际上有两个部分，一个UX警告和一个实际的解决scheme 。
UX警告
如果你的模态包含了很多，需要滚动，问问你自己是否应该使用模态。 默认情况下，引导模式的大小是多less视觉信息应该适合的相当好的限制。 根据你所做的，你可能会想要select一个新的页面或向导。
实际解决scheme
在这里： http : //jsfiddle.net/ajkochanowicz/YDjsE/2/
这个解决scheme也可以让你改变.modal的高度， .modal需要的话， .modal-body会用一个垂直的滚动条占据剩下的空间。
UPDATE
请注意，在Bootstrap 3中，模式已被重构以更好地处理溢出的内容。 在视口下stream动时，您可以上下滚动模式。
如果我没有记错，设置溢出：隐藏在身上并不适用于我为一个移动网站build立的模式库的所有浏览器。 具体而言，即使在将溢出物隐藏在身体上的情况下，除了模式滚动之外，还有防止身体滚动的麻烦。
对于我现在的网站，我最终做了这样的事情。 除了在页面主体上设置“overflow”为“hidden”之外，它基本上只保存当前的滚动位置，然后在模式closures后恢复滚动位置。 当另一个引导程序模式打开而另一个已经激活的时候，还有一个条件。 否则，其余的代码应该是自我解释的。 请注意，如果隐藏在主体上的溢出不会阻止窗口滚动给定的浏览器，则至less会在退出时重新设置原始滚动位置。
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; }); }
如果你不喜欢这个，另一个select是将一个最大高度和溢出：auto设置为.modal-body，如下所示：
.modal-body { max-height:300px; overflow:auto; }
对于这种情况，您可以为不同的屏幕尺寸configuration最大高度，并为不同的屏幕尺寸保留溢出：自动。 你将不得不确保模态的页眉，页脚和主体的总和不超过屏幕尺寸，所以我会在计算中包含这个部分。
设置modal-body高度，而不是整个模态，以获得模态叠加的完美滚动。 我得到这样的工作：
.MyModal { height: 450px; overflow-y: auto; }
在这里你可以根据你的要求设置高度。
这就是我纯粹用CSS覆盖某些类的方式：
.modal { height: 60%; .modal-body { height: 80%; overflow-y: scroll; } }
希望它可以帮助你。
当用skrollr使用Bootstrap模态时，模态将不可滚动。
解决问题，停止触摸事件传播。
$('#modalFooter').on('touchstart touchmove touchend', function(e) { e.stopPropagation(); });
将滚动事件添加到＃skrollr-body中的元素的更多细节
其实对于Bootstrap 3，你也需要重写.modal-open类的正文。
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 15px; /*<-- to margin-right: 0px;*/ }
我在iPhone6的Mobile Safari上遇到这个问题
Bootstrap在.modal-open模式时将.modal-open类添加到主体。
我已经试过对Bootstrap 3.2.0做最小的覆盖，并提出了以下内容：
.modal-open { position: fixed; } .modal { overflow-y: auto; }
为了比较，我在下面包含了相关的Bootstrap样式。
从bootstrap / less / modals.less中select提取（不包括在您的修复中）：
// 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
我有同样的问题，并find了一个修复如下：
$('.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％的工作。
使用所有这些提到的解决scheme后，我仍然无法滚动使用鼠标滚动，键盘上/下button正在滚动的内容工作。
所以我已经添加了下面的CSS修复，使其工作
.modal-open { overflow: hidden; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; **pointer-events: auto;** }
增加了指针事件：auto; 使其可以鼠标滚动。
我能够通过在.modal-body元素上使用带“max-height”的“vh”度量来克服这个问题。 70vh看我的用途是正确的。
.modal-body { overflow-y: auto; max-height: 70vh; }
.modal-body { max-height: 80vh; overflow-y: scroll; }
这对我有用
当我们打开或closures一个模式时，Bootstrap会向<body>标签添加或移除一个"modal-open"的css。 所以，如果你打开多个模式，然后closures任意一个，模式打开的CSS将被从身体标记中删除。
但是滚动效果取决于属性"overflow-y: auto;" 在modal-open定义
解决scheme1 ：如果您使用低于3v的引导程序（对于已经声明的高版本），您可以声明.modal{ overflow-y:auto}或.modal-open .modal{ overflow-y:auto} 。
Bootstrap添加modal-open类到body为了删除滚动条，如果显示模式，但不添加任何类，也可以有滚动条的html有时候可以看到html的滚动条，以删除它必须设置模式显示/隐藏事件和添加/删除 overflow:hidden在html 。 这里如何做到这一点。
$('.modal').on('hidden.bs.modal', function () { $('html').css('overflow','auto'); }).on('shown.bs.modal', function () { $('html').css('overflow','hidden'); });
解决scheme2 ：由于模态具有function键，处理这个问题的最好方法就是修改模型的高度，甚至更好地将模态的高度与视口的高度连接，
.modal-body { overflow:auto; max-height: 65vh; }
有了这个方法，你也不必处理body和html滚动条。
注1 ：浏览器支持 vh单元。
注2 ： 如上所述 。 如果将.modal{position:fixed}更改为.modal{position:absolute} ，但是如果页面的高度比模态用户高，则模式将从视口中消失，这对用户体验不利。
