gpt4 book ai didi

ios - 仅在滚动时,iOS设备上的iFrame中的延迟加载页面才会被(垂直)切断

转载 作者:行者123 更新时间:2023-12-01 16:21:49 26 4
gpt4 key购买 nike

我有一个信息亭网页,其中加载了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滚动(使用浏览器堆栈进行测试)。

最佳答案

试试这个,我改变了前三行。由于它不遵守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;
}

让我知道这个是否奏效。

关于ios - 仅在滚动时,iOS设备上的iFrame中的延迟加载页面才会被(垂直)切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57927919/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com