Question

我正在使用iFrame的页面上引导模态，其中iframe很大。我无法滚动此表格在iPhone浏览器上垂直显示。我交叉检查了相同的Android手机，我可以向下滚动。但是用iphone 似乎有问题。

不确定是什么问题

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog model-bookingform" role="document">
    <div class="modal-content">
      <div class="modal-header text-center" style="position:absolute; right:0px; z-index:999; padding:0px;">
        @*<h4 class="modal-title w-100 font-weight-bold">Form</h4>*@
        <button type="button" class="close btn-model-close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="embed-responsive embed-responsive-16by9 z-depth-1-half bookingformiframe-w">
        <iframe id="iframex" class="embed-responsive-item" style="overflow:auto;" src="https://example.com/largeform"></iframe>
      </div>
    </div>
  </div>
</div>

CSS

我什至没有办法添加其他CSS，当我尝试滚动而不是滚动iframe内容时，似乎滚动页面

@media (max-width:800px) {
  #modalLoginForm {
    overflow: scroll;
    z-index: 999999 !important;
  }

  iframex {
    overflow: scroll !important;
    z-index: 9999999 !important;
  }
}

.modal {
  overflow-y: auto !important;
}

.modal-open .modal {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

Answer 1

可能是Safari滚动问题。尝试将-webkit-overflow-scrolling: touch;属性添加到iframe的包装器中，如下所示：

.embed-responsive {
  -webkit-overflow-scrolling: touch;
}

希望获得帮助

Answer 2

作为一种临时修复措施，该问题似乎仅在iPhone上存在，因为它在其他移动设备上可以正常工作

.embed-responsive-16by9 {
    padding-bottom: 0% !important;
    height:1100px !important;
}

具有iframe的引导程序模式，仅允许在iPhone上垂直滚动

2 个答案: