滚动页面的其他部分时需要 iFrame 不移动答案

【问题标题】：need iFrame to not move when other part of page is scrolled滚动页面的其他部分时需要 iFrame 不移动
【发布时间】：2012-06-25 14:23:07
【问题描述】：

在我的 asp.net 应用程序中，我有一个带有标题的页面，然后在页面的正文中显示人们可以选择的项目。当有人选择一个项目时，主体右侧会出现一个 iframe，并显示有关所选项目的详细信息。 iframe 大小和位置是使用屏幕大小设置的。在所有桌面浏览器中 - 我可以使用以下 javascript 解决此问题。

<script type="text/javascript">
window.onscroll = scroll;
</script>

这里是javascript函数滚动

function scroll() {
    var divT = document.getElementById('searchframe');
    var divD = document.getElementById('detailframe');

    if (document.body.scrollTop > 80) {
        divT.style.top = document.body.scrollTop
        divD.style.top = document.body.scrollTop

        document.getElementById('detailframe').height = '100%';
    }
    if (document.body.scrollTop == 0) {
        divT.style.top = 75
        divD.style.top = 75
    }
}

使用http://code.google.com/p/ibbdemo2/ - 一个adobe air ipad 模拟器进行测试时，甚至没有调用滚动功能。我可以通过放置警报来告诉这一点，警报会在所有其他浏览器上弹出，甚至在这个模拟器中，除了滚动功能。在其他浏览器中，在 window.onclick 行放置警报会显示警报，但在 safari mobile 上不会显示警报 - 这意味着 window.onscroll 事件似乎甚至没有被触发。感谢您的帮助。

编辑 - 我还可以在所有浏览器中使用以下任何行来捕获滚动事件，除了移动 safari

window.onscroll = scroll;
document.onscroll = scroll;
document.addEventListener("scroll", scroll, false);

【问题讨论】：

您是否意识到您在几行末尾缺少分号？
是的，这已经完成，其他几行（实际上并不重要 - 我在网上发布任何内容之前的政策）已被删除 - 我还可以将 window.onscroll 设置为一个简单的新函数提醒你好世界 - 它仍然没有调用该函数。

标签： javascript ios iframe scroll mobile-safari

【解决方案1】：

为什么必须在 javascript 中执行此操作？

CSS：

position:fixed;
right: 10px;
top: 10px;

不工作？

【讨论】：

我不必在 javascript 中执行此操作，但这就是它目前在整个站点中执行的方式。让我试试这个，看看是否可行。
我可以使用 css 来做到这一点，由于在这个（我开始在这里工作时继承的）应用程序中滥用 CSS，这将需要大量的时间和精力。添加 javascript 会更快（因为此应用程序即将完成并将完全重做）。如果不行，就得重做多页CSS
刚刚意识到，宁愿不使用 CSS，取决于滚动顶部，iframe 的高度大小会发生变化，我认为使用 css 无法处理
嗯……你用真机试过了吗？可能是这个模拟器的bug？
我就是这么想的，我今天应该可以拿到真机来测试了。

【解决方案2】：

这个问题只是模拟器造成的，实际上可以在设备上运行。

【讨论】：

【解决方案3】：

document.getElementById('iframeID').style.top = intVal;

【讨论】：