Question

我有一个在弹出窗口（iframe）中打开的页面，它可以在除移动Safari（iPhone 6 Plus）之外的任何地方正常运行-滚动不起作用...用一根手指和两根手指尝试了-仍然不起作用。父窗口页面正在滚动（但我确实滚动了弹出式iframe，并且可以看到父页面在后台滚动）。

我在该主题上进行了一些搜索，找到了几个解决方案，但是它们对我不起作用（可能是因为它们已经使用了几年，甚至可能已经过时了。）

这是我的代码：

.mfp-content {
  position: relative;
  heigh: 900px;
  width: 900px;
}

.mfp-iframe-scaler {
    overflow: auto !important;  //also tried 'scroll' here
    -webkit-overflow-scrolling: touch !important;
}

.mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999999;
}

<div class="mfp-content">
  <div class="mfp-iframe-scaler">
    <button title="Close (Esc)" type="button" class="mfp-close">×</button>
    <iframe class="mfp-iframe" src="/super-page" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>

我还尝试将这些样式设置为iframe中的主体：

body.inside-iframe {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

这些工作都没有...

这里是jsfiddle进行测试：https://jsfiddle.net/Ljoc7u9z/

我也该怎么做才能在iframe中为移动Safari进行滚动浏览？

iframe滚动在移动Safari中不起作用

0 个答案: