javascript - 如何同步2个iframe的滚动条

Question

我的任务是在单个 html 页面中启动 2 个网页并并排进行网页比较，因此我为每个比较网页创建 2 个 iframe，但是我在同步滚动条行为时遇到问题，就像当我移动左侧网页(iframe1)上的垂直滚动条时，右侧网页(iframe2)上的滚动条也会移动。有谁知道该怎么做吗？或者除了使用 iframe 之外的其他方法，但可以启动 2 个网页并同步滚动条？谢谢。

Answer 1

您可以使用 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;
};