ios iframe 仅在从纵向 -> 横向更改方向后不可滚动答案

【问题标题】：ios iframe unscrollable only after orientation change from portrait -> landscapeios iframe 仅在从纵向 -> 横向更改方向后不可滚动
【发布时间】：2015-08-03 11:18:50
【问题描述】：

我在 ios 上设置了一个可滚动的 iframe

<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: scroll; -webkit-overflow-scroll: touch; ...">
  <iframe style="height: 600px, ...">
  </iframe>
</div>

iframe 的高度实际上设置为screen.availHeight，并且不会随着方向变化而变化。

现在，如果在手机处于纵向模式时打开模式，它可以正常工作。如果在手机处于横向模式时打开模式，它可以正常工作。如果它以横向模式打开并旋转为纵向，也可以正常工作。

但是，如果它以纵向模式打开并旋转到横向模式，则滚动不起作用；您最终会滚动底层页面，而不是模式本身。

尽管无论方向如何，样式都完全相同。

以前有人遇到过这种情况吗？解决方法？这是怎么回事？我是这里的 n00b，任何建议表示赞赏。

【问题讨论】：

标签： javascript ios css iphone iframe

【解决方案1】：

var doOnOrientationChange = function() {
    switch (window.orientation) {
        case -90:
        case 90:
            console.log('landscape');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal').scrollTop(1);
            }
            break;
        default:
            console.log('portrait');
            if ($('.modal').length && $('.modal').hasClass('in')) {
                $('.modal.in').css('overflow', 'hidden');
                setTimeout(function() {
                    $('.modal.in').css('overflow-x', 'hidden').css('overflow-y', 'auto');
                }, 10);
            }
            break;
    }
};

window.addEventListener('orientationchange', doOnOrientationChange);

doOnOrientationChange();

我就是这样解决这个问题的

【讨论】：