Question

我正在使用JavaScript和jQuery创建一个水平滚动iframe文档，使用iframe的绝对位置使它们并排显示。我正在使用一个基于jsFiddle的短脚本，我发现它在屏幕的左上角显示一个元素的共同点，并且随着页面的滚动而改变。我已经创建了我自己的实现，并试图让它工作，但是当我加载网站告诉我未定义变量的顶级属性无法读取时，我收到错误，即使我正在做的第一件事正在定义它。我查看了我的所有代码，我不明白为什么会出现这种情况，我已经添加了正确的jQuery脚本，并且我在使用它之前定义变量是常态。我在此基础上的小提琴可以在这里找到：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;
}

Answer 1

您需要修复选择器：

var if1 = $("if1");   // Look for 'if1' tag

应该是：

var if1 = $("#if1");  // Look for an element with 'if1' id

Jquery偏移属性不可读错误

1 个答案: