时间戳

首页 > 解决方案 > 仅在滚动时，iFrame 中的延迟加载页面在 iOS 设备上（垂直）被切断

ios - 仅在滚动时，iFrame 中的延迟加载页面在 iOS 设备上（垂直）被切断

问题描述

我有一个信息亭网页，它加载了一个 55px 的标题和一个 iFrame，它占据了它下面的窗口的其余部分。在 iFrame 内，我有一个页面可以延迟加载项目网格。我们一次加载 50 个项目，然后再加载另外 50 个，依此类推。每个项目都附加到 iFrame 内容页面中的容器 div。

这不会对桌面浏览器或 Android 设备造成问题。但是，在 iOS 设备上，它可以让我向下滑动某些页面，但随后会被随机截断 - 不允许我滑动到内容页面的底部。

我读过你应该把你的 iFrame 放在一个 div 里面。我已经这样做了，如下所示：

<header class="kiosk-header">
   CONTROLS
</header>
<div id="kiosk-bid-app-container-div">
  <iframe id="kiosk-bid-app-container" src="page.php" scrolling="yes" frameborder="0"></iframe>
</div>

我的 CSS：

.kiosk-header {
    padding: 1rem;
    margin: 0;
    border-bottom: 1px solid #777;
    text-shadow: -1px -1px 0 #fff;
    height:55px;
    position:fixed;
    width:100%;
}

#kiosk-bid-app-container-div {
    width: 100%;
    height: calc(100% - 55px);
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top:55px;
}

#kiosk-bid-app-container {
    width:100%;
    height:100%;
}

我无法控制内容页面（示例中列出的 page.php）。我不确定下一步该去哪里。我已阅读此处列出的响应式 iOS iFrame 页面，但这并不能解决我在 iOS 设备中看到的有限 Y 滚动（使用 browserstack 进行测试）。

标签： iosiframe

解决方案

试试这个，我改了前三行。它恰好是移动 safari 中的一个怪癖，因为它不遵守 iframe 的宽度。

#kiosk-bid-app-container-div {
    width: 1px;
    min-width: 100%;
    *width: 100%;
    height: calc(100% - 55px);
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch !important;
    margin-top:55px;
}

让我知道这个是否奏效。

推荐阅读