如何启用滚动内容内的模式？

在 Bootstrap.css 中，将 Modal 的后台属性(position)从 fixed更改为 absolute

下面是我用 CSS 覆盖一些类的方法:

.modal {
height: 60%;


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

希望能帮到你。

这个答案实际上有两部分，一个是 用户体验警告，一个是 真正的解决办法。

用户体验警告

如果你的模态包含了太多需要滚动的内容，问问你自己是否应该使用模态。默认情况下，引导模式的大小对于应该适合多少可视化信息是一个很好的约束。根据您所创建的内容，您可能希望选择一个新页面或向导。

实际解决方案

在这里: http://jsfiddle.net/ajkochanowicz/YDjsE/2/

这个解决方案还允许您更改 .modal的高度，并让 .modal-body在必要时使用垂直滚动条占用剩余的空间。

更新

注意，在 Bootstrap 3中，模态已经被重构以更好地处理溢出内容。您将能够随着模态在 viewport 下的流动而上下滚动模态本身。

实际上，对于 Bootstrap 3，您还需要覆盖 body 上的. mode-open 类。

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

在 Bootstrap 3中，你必须改变 css类 .modal

之前(启动缺省值) :

.modal {


overflow-y: auto;
}

之后(编辑之后) :

.modal {


overflow-y: scroll;
}

如果我没记错的话，设置 overflow: hide on the body 对于我为移动站点构建的模态库所测试的所有浏览器都不起作用。具体来说，即使我将 overflow: 隐藏在 body 上，也无法防止主体在模态滚动之外进行滚动。

对于我目前的站点，我最终做了类似的事情。它基本上只是存储您当前的滚动位置，除了设置“溢出”到“隐藏”在页面主体，然后恢复滚动位置后的模态关闭。这里有一个条件，当另一个引导模式打开时，其中一个已经处于活动状态。否则，代码的其余部分应该是不言自明的。请注意，如果主体上隐藏的 overflow: 不能阻止窗口滚动给定的浏览器，这至少会在退出时将原始滚动位置设置回来。

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 to. mode-body，如下所示:

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

对于这种情况，您可以为不同的屏幕大小配置 max-height，并保持溢出: auto 以适应不同的屏幕大小。但是，您必须确保模态页眉、页脚和主体加起来不超过屏幕大小，因此我将在计算中包括该部分。

当在 skrollr 中使用 Bootstrap 模式时，模式将变得不可滚动。

通过停止触摸事件的传播修复了问题。

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

更多详情，请浏览 将滚动事件添加到 # skrollr-body 中的元素

我的 iPhone6在 Mobile Safari 上出现了这个问题

Bootstrap 在打开模态时将类 .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 : 如果使用低于3v 的引导程序，可以声明 .modal{ overflow-y:auto}或 .modal-open .modal{ overflow-y:auto}(对于高版本，已经声明了)。

Bootstrap 将 modal-open类添加到 body，以便在显示模态时移除滚动条，但是不向 html添加任何也可以有滚动条的类，因此 html的滚动条有时也可以看到，为了移除它，你必须在 html上设置模态 显示[隐藏]事件和 添加/删除 overflow:hidden。这里教你怎么做。

$('.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}，但是如果页面高度超过模态用户可以向上滚动太多，模态将从视口中消失，这对用户体验是不好的。

设置高度为 modal-body，而不是为整个模态得到一个完美的滚动模态覆盖。我让它这样工作:

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

在这里你可以根据你的要求设置高度。

我也遇到了同样的问题，并且找到了如下的解决方案:

$('.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% 正常。

在使用所有这些提到的解决方案，我仍然不能滚动使用鼠标滚动，键盘上/下按钮为滚动内容工作。

所以我已经添加了下面的 css 修复程序，使其工作

.modal-open {
overflow: hidden;
}


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

增加了 指针事件: 自动;，使其鼠标滚动。

当我们打开或关闭一个模态时，Bootstrap 将向 <body>标记添加或删除一个 css"modal-open"。因此，如果您打开多个模态，然后关闭任意一个，模态开放的 css 将从 body 标记中删除。

但是滚动效果依赖于 modal-open中定义的属性 "overflow-y: auto;"

我能够克服这一点，使用“ vh”度量与最大高度。模态-体元件模态-体元件。70vh 看起来很适合我。

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

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

对我有用

在 Bootstrap 5中，可以使用类: change

<div class="modal-dialog">

到

<div class="modal-dialog modal-dialog-scrollable">

另外，考虑添加类 modal-dialog-centered。

在 Bootstrap v3.3.7中，我需要添加以下内容来允许水平滚动:

.modal-open {
overflow: visible;
}
.modal {
position: absolute;
}
.modal.in {
display: table !important;
}