是否有一个JavaScript/css的方法，使同步滚动区域类似于"meld"

Is there a JavaScript/css method of making synced scrolling areas similar to "meld"?

本文关键字：quot 滚动 区域 类似于 meld 同步 JavaScript 有一个 css 方法 是否      更新时间：2023-09-26

我想有一对div，滚动同步彼此的方式类似于diff工具，融合。注意:由于这是一个静态图像，当您移动滑块时，相应的滑块会与另一个滑块同步移动。我需要在水平和垂直方向上都这样做。

这是一个高度定制的diff工具，一些差分线非常长，需要进行水平滚动。这是一个网页，我使用jQuery，但任何css/JavaScript的方法将是赞赏。

它应该像绑定到每个div的滚动事件并设置.scrollTop &另一个div的.scrollLeft等于滚动div的scrollTop &scrollLeft .

参见https://developer.mozilla.org/en/DOM/element.scrollTop &&https://developer.mozilla.org/en/DOM/element.scrollLeft

Edit:下面是一个例子:http://jsfiddle.net/dHvJJ/

我假设您有一个固定的字体大小。我也假设这两个容器是2div。这是我的方法(为了支持网页适当调整大小):

  1. 将font-size从px转换为em
  2. 从代码中输出对应数组(例如，您应该已经知道第一个div中的32-33行对应于第二个div中的22行)
  3. 为两个div的onscroll添加事件处理程序。现在的"魔法"是计算相应的滚动条应该在哪里，根据你的信息-这是相当安全的假设，为了滚动到第32行，你必须滚动22行在左边，以此类推。对于水平滚动，我不认为应该有什么困难，只需在相同的scrollLeft位置滚动相应的div
相关文章：