我正在寻找correct确保在 ipad / iOS5 上的 iframe 中滚动后动态显示的内容可见的方法。
哦，Iframe 和 iPad——你真是个了不起的老栗子。我知道：
- iPad 将 iframe 扩展到其内容的整个高度（几乎就像使用 HTML5 的“seamless“属性，但不完全是因为它不从父级继承样式或事件）。奇怪，对许多人来说很烦人，但确实如此。
-
<iframe height="100%">因此是无用的，因为它的大小取决于其内容而不是容器
-
我需要将 iframe 包裹在 div 中 - 啦
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
或者介绍一些trickery设置框架的滚动位置（我认为这是基于中提到的技巧本文)
我的问题是，在 iframe 主体内动态显示的内容（例如 jquery 选项卡、手风琴等）可能会导致浏览器在页面的显示范围内裁剪内容。
例如。如果我的“选项卡”大部分位于 iframe 内可见视口的下方，并且我执行两指滚动（或实现单指scrollTop hack），那么在该内容滚动到视图中之后，其之前的一些内容未绘制的仍然未绘制。再次单击第二个选项卡/返回会导致内容显示为页面未绘制屏幕外内容。之后，如果我向上滚动到页面顶部，则不会在页面开头绘制内容（之前是可见的）。使用 上下滚动页面几次两指滚动解决了这个问题。
我读过本文这表明问题已得到解决。但它似乎并没有完全修复；仍然没有解决这个问题，因为你必须将 iframe 包装在 div 中并将滚动条放在该 div 上，桌面浏览器may根据他们的解释方式显示双滚动条overflow:auto.
附注我在 iframe 内部和外部都使用 HTML5 样板页面，并具有正确的元视口设置。
我发现我也能够solve通过使文档与 iframe 内容一样高来解决这个问题。 （按照建议iframe 内容未在 iOs5 iPad/iPhone 中的滚动下呈现）但就我而言，我不希望用户能够在现在很高的应用程序中向下滚动，因为它应该是全屏应用程序。我使用此代码来防止垂直滚动：
/*
Prevent Scrolling down.
*/
$(document).on("scroll",function(){
checkForScroll();
});
var checkForScroll = function(e)
{
var iScroll = $(document).scrollTop();
if (iScroll > 1){
// Disable event binding during animation
$(document).off("scroll");
// Animate page back to top
$("body,html").animate({"scrollTop":"0"},500,function(){
$(document).on("scroll",checkForScroll);
});
}
}
我评估了很多选项并撰写了这篇博文，其中包括测试代码。http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/
希望这可以帮助，
托弗
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
