Question

场景：我正在处理的项目要求将内容异步加载到Bootstrap 3模式中，并向用户显示加载指示。实际加载不是问题（请参阅下面的Codepen），但是当加载的内容很大时，问题是在iOS 9设备上滚动。它可以在我尝试过的所有其他设备上正常工作，包括iOS 8.我认为DOM不会更新滚动高度，因此它不会认为模式应该是滚动的。

我发现可靠的工作（但不可接受）的唯一解决方法是隐藏/显示模态的主体，从而强制重新计算。 Bootstrap自己的handleUpdate功能并不能解决问题。

我在http://codepen.io/jkrehm/full/LpRzJV/创建了一个关于Codepen的最小示例（代码可用here）。我希望我可以在我的问题中嵌入二维码，这样你就可以轻松地在手机上找到它。

最相关的代码是：

// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
    $(this).find('.modal-body')
        .html('loading...')
        .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
            // Use Bootstrap's built-in function to fix scrolling (to no avail)
            $modal.modal('handleUpdate');
        });
});

如果我更改代码以便在显示模式之前加载内容，那么一切正常，但用户没有加载指示符（只是暂停后不确定的长度）他们点击按钮，然后出现模态）。

摘要：如何说服iOS 9重新计算.modal-body的滚动高度？

更新（2017年8月15日）：

显然，这个问题没有令人满意的解决方案。 Bootstrap从模态中选择了remove -webkit-overflow-scrolling:touch，并向其提交了一个bug的Webkit。也许有一天会得到修复，也许不会。目前，提供的解决方案是最好的解决方案＆＃34;。

Answer 1

CSS解决方法：

.modal-dialog {
    height: 101%;
}

通过使对话框始终滚动，无论内容大小如何。

来自：https://github.com/twbs/bootstrap/issues/20256#issuecomment-231267164

Answer 2

我的同事和我能够找到解决此问题的黑客工作。

使用上面的代码，类似这样的内容将使iOS 9上的滚动工作：

// Show loader & then get content when modal is shown
$modal.on('show.bs.modal', function(e) {
    $(this)
        .css('overflow-y', 'hidden')
        .find('.modal-body')
        .html('loading...')
        .load('https://baconipsum.com/api/?type=meat-and-filler&paras=10', function() {
            // Use Bootstrap's built-in function to fix scrolling (to no avail)
            $modal
                .css('overflow-y', '')
                .modal('handleUpdate');
        });
});

注意.css('overflow-y', ...)行。那是神奇的酱汁。但是，我们不是使用实际的CSS，而是使用类.modal-scrollfix - 我们添加＆amp;删除以达到相同的效果。

我已经创建了我之前笔的一个分叉并应用了修复程序。 http://codepen.io/jkrehm/full/OybdrW/（code）

我有关于此问题的ticket与Bootstrap一起打开，但我不确定除了添加文档之外他们可以做些什么。希望Apple能够通过未来版本的iOS Safari解决这个问题。

Answer 3

在通过JavaScript动态加载conconnt之后，我设法通过添加以下行来解决此问题：

$（“ div＃myModal”）。css（'overflow'，'auto'）;

动态加载的Bootstrap Modal不会在iOS 9上滚动

3 个答案: