jQuery/javascript - 在 iframe 视图区域中居中放置一个 div。调整 iframe 高度后，scrollTop 不准确
好吧，通常这很容易，但出于视觉原因，我强制 iframe 与其包含的内容具有相同的高度。这样做的作用是只给我一个滚动条，即父窗口上的滚动条。 iframe 文档从不滚动。当我尝试将 div 置于 iframe 中心时，问题就出现了。当页面向下滚动几页时，我无法获得准确的滚动顶部值。 $(window).scrollTop() 始终为零。如果我使用parent.document.documentElement.scrollTop而不是$(window).scrollTop()，我会得到一个值，但它完全没有午餐时间了。例如，如果 iframe 的高度为 2011，我滚动到 iframe 的底部并查询parent.document.documentElement.scrollTop，则返回值 567。我的屏幕尺寸是 1200
所有浏览器中的结果相同。测试了最新的IE、FF、Opera、Chrome。
模拟
in outerdoc.htm I have
<iframe id="myFrame" src="doc1.htm"></iframe>
doc1.htm:
<html>
<head>
<title>my title</title>
</head>
<body>
<p> 10 pages of content near the bottom <div onclick="CenterDiv($('#myDiv'))">show div</div></P>
<div id="myDiv"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#myFrame', top.document).height($(document).height()); //sets height of frame to document within
});
function CenterDiv(item)
{
var mtop = ($(window).height() / 2 - item.height() / 2) + $(top.window).scrollTop());
item.css('top', mtop < 0 ? 0 : mtop );
}
</script>
</body>
</html>
ok normally this would be easy but for visual reasons I force my iframe to be the same height as the content it contains. What this does is gives me only one scroll bar, the scroll bar on the parent window. The iframe document never scrolls. The problem comes when i try to center a div within the iframe. When the page is scrolled a couple of pages down I cannot get an accurate scrolltop value. $(window).scrollTop() is always zero. If I use parent.document.documentElement.scrollTop instead of $(window).scrollTop() I get a value but it is completely out to lunch. For example if iframe's height is 2011 and I scroll to the bottom of the iframe and I query parent.document.documentElement.scrollTop I get a value 567 returned. My screen size is 1200
Same results in all browsers. Tested latest IE, FF, Opera, Chrome.
To simulate
in outerdoc.htm I have
<iframe id="myFrame" src="doc1.htm"></iframe>
doc1.htm:
<html>
<head>
<title>my title</title>
</head>
<body>
<p> 10 pages of content near the bottom <div onclick="CenterDiv($('#myDiv'))">show div</div></P>
<div id="myDiv"></div>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$('#myFrame', top.document).height($(document).height()); //sets height of frame to document within
});
function CenterDiv(item)
{
var mtop = ($(window).height() / 2 - item.height() / 2) + $(top.window).scrollTop());
item.css('top', mtop < 0 ? 0 : mtop );
}
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我无法解决这个问题，但我想我会写下我所做的事情来解决这个问题。我将我想要的 div 放在包含 iframe 以及 centerdiv 函数的页面的中心。然后在 iframe 内的代码中我执行了以下操作。
I could not get this resolved but I figure I would write what I did to work around this. I put the div I wanted centered on the page that holds the iframe as well as the centerdiv function. Then in the my code inside the iframe I did the following.