如何同步 2 个 iframe 的滚动条

How to sync the scroll bar for 2 iframe

本文关键字：iframe 滚动条 何同步 同步      更新时间：2023-09-26

我有一个任务是在单个 html 页面中启动 2 个网页并排进行网页比较，所以我为每个比较网页创建了 2 个 iframe，但是我在同步滚动条行为时遇到了问题，例如当我移动左侧网页上的垂直滚动条（iframe1） 时， 然后右侧网页（iframe2）上的滚动条也会移动。有没有人知道该怎么做？或者除了使用 iframe 之外的其他方法，但可用于启动 2 个网页并同步滚动条？谢谢。

您可以使用 contentWindow 属性访问 iframe 的窗口。

注册一个滚动处理程序 contentWindow.onscroll，您可以使用 scrollTo 滚动。

安全说明：iframe 的内容应该与顶级页面来自同一域，然后才能访问 contentWindow 的值，因为跨域 Javascript 访问被阻止。

frame1.contentWindow.onscroll = function(e) {
   frame2.contentWindow.scrollTop = frame1.contentWindow.scrollTop;
   frame2.contentWindow.scrollLeft = frame1.contentWindow.scrollLeft;
};
相关文章：