程序员经验分享-hwhale

如何同步多个 iframe 的滚动位置

2023-12-23

我有一个基于选项卡的 HTML 布局（比如 5 个）。 在每个选项卡中我加载一个 iframe。 iframe 内容是彼此不同的变体，用户可以通过切换选项卡进行比较。

在 javascript 中，如何同步所有 iframe 的垂直和水平滚动？ 换句话说，在一个 iframe 中滚动应该与所有其他 iframe 滚动相同的量，从而允许用户比较相同的数据。

加分项：仅当用户第一次打开选项卡时才加载 iframe 内容。因此，新打开的 iframe 应该直接滚动到与已打开的 iframe 相同的位置。

Thanks.


虽然这适用于 div，但不适用于 iframe。

这是你可以做的，

$($('#iframe1').contents()).scroll(function(){
    $($('#iframe2').contents()).scrollTop($(this).scrollTop());
});

With jQuery 滚动事件 http://docs.jquery.com/Events/scroll，您应该能够同步它们。

Edit：无需插件。这是对我有用的代码：

<html>
<head>
<SCRIPT language="javascript" type="text/javascript" src="jquery-1.3.2.js"></SCRIPT>
<SCRIPT>
$(document).ready(function()
{
$("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
        $("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
        $("#div1").scrollLeft($("#div2").scrollLeft());
    });

});

</SCRIPT>
</head>
<body>
<div id="div1" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

<div id="div2" style="overflow:auto;height:100px;width:200px;border:1px solid black;">
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
Test..................................................................................................................................................................................................................................................................................test
<BR/><BR/>
</div>

</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

iframe

如何同步多个 iframe 的滚动位置 的相关文章

随机推荐

  • 无法在 Jetson TK1 上使用 opencv VideoCapture 打开 gstreamer 管道

    我编写了一个程序 从 gstreamer 管道读取帧 使用 opencv 库处理它们 然后写回 gstreamer 管道 代码片段 cv VideoCapture cap v4l2src video x raw framerate 30 1

  • 正则表达式单词宏找到彼此在一定范围内的两个单词，然后将这些单词斜体化？

    所以 我刚刚开始了解正则表达式 我发现学习曲线相当陡峭 然而 stackoverflow 在我的实验过程中提供了极大的帮助 我想编写一个特定的单词宏 但我还没有找到实现它的方法 我希望能够在文档中找到两个相距不超过 10 个单词的单词 然后

  • 递归重命名文件扩展名

    我很难创建一个 python 脚本来重命名文件夹中的文件扩展名并继续在子目录中执行此操作 这是我迄今为止的脚本 它只能重命名顶级目录中的文件 usr bin python Usage python rename file extension

  • NamespaceContext 以及通过 XPath 使用命名空间

    在 Java 中解析包含名称空间的 xpath 似乎需要使用NamespaceContext对象 将前缀映射到命名空间 url 反之亦然 但是 我找不到任何机制来获取NamespaceContext除了我自己实现之外 这似乎违反直觉 问题

  • xtfrm.data.frame(x) 中的警告：无法 xtfrm 数据帧：在 R 中以数字方式排序数据帧时出错

    我几周前开始学习 R 所以我对 R 编码仍然非常陌生 我试图以数字方式订购数据帧 但在订购的数据帧之上 由于执行函数 order nameofthedataframe 出现 xtfrm data frame x 中的警告 无法 xtfrm

  • 更改 api 上的状态/通知栏颜色低于 21 android？

    我在某些应用程序中看到状态栏颜色可以更改并匹配 api 级别 21 中所做的操作 我搜索并找到了这个解决方案Source https stackoverflow com questions 27093287 how to change st

  • C 编程。 FizzBu​​zz 程序 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我有一个测验 我写了这段代码 如果能被 3 整除则打印 Fizz 如果能被 3 整除则打印 Buzz 可被 5 整除 如果是 则打印 Fi

  • GCC 可以忽略函数的静态声明吗？

    在我的应用程序中 我有一个用于伪单元测试的构建配置 这更像是一种手动调试专用功能 在这些单元测试中 我想访问声明为的函数static在他们的翻译单位 GCC 是否有一个选项可以让我打电话static任何地方的功能 我想避免 if UNIT

  • 当 DOM 元素的计算样式发生变化时触发事件？

    有没有非轮询监听元素变化的方法计算风格 https developer mozilla org en US docs DOM window getComputedStyle 这个幻想代码片段应该简洁地解释我的意思 var el docume

  • 在 Google App Engine 上使用异步 urlfetch 启动后端

    我正在尝试 GAE 的几个功能 我已经建立了一个Dynamic后端 但我在让这个东西工作时遇到了几个问题没有任务队列 后端代码 class StartHandler webapp2 RequestHandler def get self d

  • 以编程方式进行角度导航（router.navigate）。错误：无法匹配任何路由

    尝试以编程方式在组件内部导航到另一个路由路径 但出现错误 错误错误 未捕获 承诺 错误 无法匹配任何路由 网址段 有应用程序的下一个结构 app module ts main module ts milestone ts const mai

  • 如何重命名 XML 节点名称

    我想将现有的 XML 节点重命名为新名称 我正在使用 DOM 概念 java 进行 XML 解析 我有一组包含相同名称的节点 例如

  • 我可以通过mysql触发器执行mysql之外的任何程序吗？

    我正在构建电子邮件通知服务 要求是在用户注册时向他发送电子邮件 目前我正在考虑执行触发器中定义的某些函数 可以是一个java函数 它必须在mysql进程之外 而不是从外部监视mysql以在数据库中添加行 mysql 中是否有可用的功能 以便

  • Raspberry Pi Arch Linux 上的 qemu 最新 sd 映像

    我正在尝试设置一个 Arch 图像并使用 qemu 以便在将图像加载到 Pi 之前交叉编译一些东西 我认为最简单的方法是 qemu 最新的启动映像 准备我需要的任何东西 然后在完成后将其添加到 Pi 上 我从以下位置下载了 Arch 图像h

  • Python从元组数组中获取列向量

    我有一个元组数组 来自结构化数组的先前处理 但提交的信息丢失了 gt gt gt arr 0 109 0 5 0 109 0 55 0 109 0 6 gt gt gt 我需要提取第一列和第二列的列向量 使用两个具有固定值的索引可以正常工作

  • 向下拉列表框中添加新值

    我有一个下拉列表框 其中一个值为其他值 我想把这些值移到最后 请在这件事上给予我帮助 我正在使用的代码如下 ddlAssetsCountryOthersone DataSource lstIMAssetsByCountryOthers dd

  • 使用 gmp mpf_class 进行近似

    我正在使用 Catch2 编写单元测试 我想检查两个向量是否相等 使用 gmplib 时它们看起来如下所示 std vector

  • Matlab12b函数imshow()的困难

    我正在使用 MATLAB 进行图像处理 并且遇到了带有指令的代码 imshow pixel labels 执行时它给出一个二进制图像 我在Mathworks com上查看了该函数的手册 最相似的使用模式是 imshow I low high

  • Linux如何确定下一个PID？

    Linux 如何确定进程的下一个 PID 这个问题的目的是为了更好的理解Linux内核 不要害怕发布内核源代码 如果 PID 是按顺序分配的 Linux 如何填补空白 当它到达终点时会发生什么 例如 如果我从 Apache 运行一个 PHP

  • 如何同步多个 iframe 的滚动位置

    我有一个基于选项卡的 HTML 布局 比如 5 个 在每个选项卡中我加载一个 iframe iframe 内容是彼此不同的变体 用户可以通过切换选项卡进行比较 在 javascript 中 如何同步所有 iframe 的垂直和水平滚动 换句

热门标签