我使用 JavaScript 和 jQuery 创建水平滚动 iframe 文档，使用 iframe 的绝对位置使它们并排显示。我正在使用一个基于 jsFiddle 的简短脚本，我发现它在屏幕左上角显示元素的坐标，并且它们随着页面滚动而改变。我已经创建了自己的实现并尝试让它工作，但是当我加载网站时出现错误，告诉我无法读取 undefined variable 的顶部属性，即使我正在做的第一件事也是如此正在定义它。我查看了所有代码，但不明白为什么会出现这种情况，我添加了正确的 jQuery 脚本，并且在按照规范使用变量之前定义了该变量。我以此为基础的 fiddle 可以在这里找到:http://jsfiddle.net/hxRPQ/22/
我拥有的 HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test 33</title>
<link href="base.css" rel="stylesheet" type="text/css">
<script src="./jquery/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery-ui.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
</head>
<body>
<div class="iFCont">
<iframe src="./HTMLFiles/07.html" class="iF" id="if1" style="left: 5px;"></iframe>
<iframe src="./HTMLFiles/08.html" class="iF2" id="if2" style="left: 1010px;"></iframe>
<iframe src="./HTMLFiles/09.html" class="iF2" id="if3" style="left: 2015px;"></iframe>
</div>
<div class="output"></div>
</body>
</html>
js文件:
function scroll()
{
var if1 = $("if1");
var ofs = if1.offset();
var posX = ofs.top - $(window).scrollTop();
var posY = ofs.left - $(window).scrollLeft();
$(".output").text("top:" + posY + ", left:" + posX);
}
$(document).ready(function a()
{
$(window).scroll(scroll);
});
以及我的 CSS 供引用:
body
{
overflow-x: scroll;
overflow-y: scroll;
}
.iF
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iF2
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iFCont
{
display: inline-block !important;
overflow-x: hidden !important;
}
.output
{
position: fixed;
top: 0px;
left: 0px;
}
最佳答案
您需要修复选择器:
var if1 = $("if1"); // Look for 'if1' tag
应该是:
var if1 = $("#if1"); // Look for an element with 'if1' id
关于javascript - jquery offset属性不可读错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17546412/