CSS 如何在模态内启用内容滚动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7508576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to enable scrolling of content inside a modal?
提问by user798204
I'm trying to fit a lot of text into a modal box created using Twitter Bootstrap, but I'm having a problem: that content refuses to scroll.
我正在尝试将大量文本放入使用 Twitter Bootstrap 创建的模式框中，但我遇到了一个问题：该内容拒绝滚动。
I tried adding overflow:scrolland overflow-y:scroll, but to no avail; that merely causes it to display a scroll bar without actually enabling the scrolling.
我尝试添加overflow:scrolland overflow-y:scroll，但无济于事；这只会导致它显示滚动条，而没有实际启用滚动。
What's the cause behind that and what can I do?
这背后的原因是什么，我该怎么办？
回答by jktress
In Bootstrap.css change the background attribute (position) of Modal from fixedto absolute
在 Bootstrap.css 中，将positionModal的背景属性 ( ) 从fixed更改为absolute
回答by Philipp Wirth
In Bootstrap 3 you have to change the cssclass .modal
在 Bootstrap 3 中，您必须更改css类.modal
before (bootstrap default) :
之前（引导程序默认）：
.modal {
overflow-y: auto;
}
after (after you edit it):
之后（编辑后）：
.modal {
overflow-y: scroll;
}
回答by Adam Grant
This answer actually has two parts, a UX warning, and an actual solution.
这个答案实际上有两部分，一个UX 警告和一个实际解决方案。
UX Warning
用户体验警告
If your modal contains so much that it needs to scroll, ask yourself if you should be using a modal at all. The size of the bootstrap modal by default is a pretty good constraint on how much visual information should fit. Depending on what you're making, you may instead want to opt for a new page or a wizard.
如果您的模态包含太多需要滚动的内容，请问问自己是否应该使用模态。默认情况下，bootstrap modal 的大小对应该适合多少视觉信息是一个很好的约束。根据您正在制作的内容，您可能想要选择新页面或向导。
Actual Solution
实际解决方案
Is here: http://jsfiddle.net/ajkochanowicz/YDjsE/2/
在这里：http: //jsfiddle.net/ajkochanowicz/YDjsE/2/
This solution will also allow you to change the height of .modaland have the .modal-bodytake up the remaining space with a vertical scrollbar if necessary.
此解决方案还允许您更改高度.modal并.modal-body在必要时使用垂直滚动条占用剩余空间。
UPDATE
更新
Note that in Bootstrap 3, the modal has been refactored to better handle overflowing content. You'll be able to scroll the modal itself up and down as it flows under the viewport.
请注意，在 Bootstrap 3 中，模态已被重构以更好地处理溢出的内容。当它在视口下流动时，您将能够上下滚动模态本身。
回答by Ravindra
Set height for modal-bodyand not for the whole modal to get a perfect scroll on modal overlay. I get it work like this:
modal-body为整个模态设置高度而不是为整个模态设置高度以在模态叠加上获得完美的滚动。我得到它的工作方式如下：
.MyModal {
height: 450px;
overflow-y: auto;
}
Here you can set height as per your requirements.
在这里您可以根据您的要求设置高度。
回答by Daniel
If I recall correctly, setting overflow:hidden on the body didn't work on all the browsers I was testing for a modal library I built for a mobile site. Specifically, I had trouble with preventing the body from scrolling in addition to the modal scrolling even when I put overflow:hidden on the body.
如果我没记错的话，在我为移动站点构建的模态库测试的所有浏览器上，设置overflow:hidden 都不起作用。具体来说，即使我将 overflow:hidden 放在 body 上，除了模态滚动之外，我也无法防止 body 滚动。
For my current site, I ended up doing something like this. It basically just stores your current scroll position in addition to setting "overflow" to "hidden" on the page body, then restores the scroll position after the modal closes. There's a condition in there for when another bootstrap modal opens while one is already active. Otherwise, the rest of the code should be self explanatory. Note that if the overflow:hidden on the body doesn't prevent the window from scrolling for a given browser, this at least sets the original scroll location back upon exit.
对于我目前的网站，我最终做了这样的事情。除了在页面主体上将“溢出”设置为“隐藏”之外，它基本上只存储您当前的滚动位置，然后在模态关闭后恢复滚动位置。那里有一个条件，当另一个引导模式打开而一个已经处于活动状态时。否则，其余的代码应该是不言自明的。请注意，如果溢出：隐藏在主体上不会阻止窗口为给定浏览器滚动，这至少会在退出时将原始滚动位置设置回原处。
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;
});
}
If you don't like this, the other option would be to assign a max-height and overflow:auto to .modal-body like so:
如果你不喜欢这样，另一个选项是将 max-height 和 overflow:auto 分配给 .modal-body ，如下所示：
.modal-body {
max-height:300px;
overflow:auto;
}
For this case, you could configure the max-height for different screen sizes and leave the overflow:auto for different screen sizes. You would have to make sure that the modal header, footer, and body don't add up to more than the screen size, though, so I would include that part in your calculations.
对于这种情况，您可以为不同的屏幕尺寸配置 max-height，并为不同的屏幕尺寸保留 overflow:auto。不过，您必须确保模态页眉、页脚和正文的总和不会超过屏幕大小，因此我会将这部分包括在您的计算中。
回答by ken
When using Bootstrap modal with skrollr, the modal will become not scrollable.
在 skrollr 中使用 Bootstrap 模态时，模态将变得不可滚动。
Problem fixed with stop the touch event from propagating.
解决了停止传播触摸事件的问题。
$('#modalFooter').on('touchstart touchmove touchend', function(e) {
e.stopPropagation();
});
more details at Add scroll event to the element inside #skrollr-body
回答by Alejandro García Iglesias
This is how I did it purely with CSS overriding some classes:
这就是我纯粹使用 CSS 覆盖某些类的方式：
.modal {
height: 60%;
.modal-body {
height: 80%;
overflow-y: scroll;
}
}
Hope it helps you.
希望对你有帮助。
回答by Jmorvan
Actually for Bootstrap 3 you also need to override the .modal-open class on body.
实际上对于 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;*/
}
回答by ptim
I'm having this issue on Mobile Safari on my iPhone6
我在 iPhone6 上的 Mobile Safari 上遇到了这个问题
Bootstrap adds the class .modal-opento the body when a modal is opened.
Bootstrap 会在.modal-open打开模态时将该类添加到主体中。
I've tried to make minimal overrides to Bootstrap 3.2.0, and came up with the following:
我试图对 Bootstrap 3.2.0 进行最少的覆盖，并提出以下建议：
.modal-open {
position: fixed;
}
.modal {
overflow-y: auto;
}
For comparison, I've included the associated Bootstrap styles below.
为了比较，我在下面包含了相关的 Bootstrap 样式。
Selected extract from bootstrap/less/modals.less (don't include this in your fix):
从 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;
}
Mobile Safari version used: 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
使用的移动 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
回答by Amin Bakhtiari Far
I had the same issue, and found a fix as below:
我遇到了同样的问题，并找到了如下修复方法：
$('.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% working.
100% 工作。
