0

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

我拥有的 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;
}
4

1 回答 1

2

您需要修复您的选择器：

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

应该：

var if1 = $("#if1");  // Look for an element with 'if1' id
于 2013-07-09T10:57:43.453 回答