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

Dynamically loaded Bootstrap Modal does not scroll on iOS 9

本文关键字：不能 滚动 iOS 加载 Bootstrap Modal 动态      更新时间：2023-09-26

场景:我正在进行的项目需要将内容异步加载到Bootstrap 3模式中，并向用户显示加载指示。实际的加载不是问题(参见下面的Codepen)，但当加载的内容很大时，iOS 9设备上的滚动是一个问题。它在我试用过的其他所有设备上都能正常运行，包括iOS 8。我认为DOM没有更新的滚动高度，所以它不认为模式应该是可滚动的。

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

我在codeen上创建了一个最小的例子http://codepen.io/jkrehm/full/LpRzJV/(代码在这里可用)。我希望我能在我的问题中嵌入一个二维码，这样你就可以很容易地在手机上找到它。

最相关的代码是:

// 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选择从模态中删除-webkit-overflow-scrolling:touch，并与Webkit提交了一个关于它的bug。也许有一天它会被修复，也许不会。目前，提供的变通方法是最好的"解决方案"。

CSS解决方案:

.modal-dialog {
    height: 101%;
}

的工作原理是使对话框始终可滚动，而不管内容大小。

: https://github.com/twbs/bootstrap/issues/20256 issuecomment - 231267164

我和我的同事想出了一个巧妙的方法来解决这个问题。

使用我上面的代码，像这样的东西将使滚动在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——我们添加了&删除以获得相同的结果。

我已经创建了我以前的笔的一个分支，并应用了修复。http://codepen.io/jkrehm/full/OybdrW/(代码)

我在Bootstrap上开了一个关于这个问题的票，但我不确定他们除了添加文档之外还能做什么。希望苹果能在未来版本的iOS Safari中修复这个问题。

我设法通过在通过javascript动态加载内容之后添加以下行来解决这个问题:

$ ("div # myModal ") . css("溢出","汽车");

相关文章：