王牌编辑器同步滚动答案

【问题标题】：Ace Editor synchronous scrolling王牌编辑器同步滚动
【发布时间】：2013-02-07 12:55:38
【问题描述】：

我有两个同时运行的 Ace 编辑器会话并排运行，我正在尝试同步两个编辑器的垂直滚动。我找到了一个简单的 jQuery 方法，它适用于普通 Div，但我怎样才能使其适应 Ace 正常工作？

jQuery 方法：

$("#editor1").scroll(function () { 
    $("#editor2").scrollTop($("#editor1").scrollTop());
    $("#editor2").scrollLeft($("#editor1").scrollLeft());
});

$("#editor2").scroll(function () { 
    $("#editor1").scrollTop($("#editor2").scrollTop());
    $("#editor1").scrollLeft($("#editor2").scrollLeft());
});

显然，上述方法不适用于 Ace。我一直在这里查看 Ace API：Virtual Renderer 寻求解决方案，但在编辑器上滚动时我什至无法设置任何回调函数。

API Here 中有对滚动条的引用，但似乎无法让它做任何事情。我试过这样测试它......

editor.ScrollBar.on('scroll', function() {
    alert('Callback?');
});

有人可以帮我解决这个问题吗？ :) 谢谢。

编辑

下面的解决方案确实有效，但（在我的情况下）它几乎立即使浏览器（Chrome）崩溃。我在它上面设置了一个超时功能来限制它的触发速度，但它仍然不可避免地崩溃。想法？

editor.getSession().on('changeScrollTop', function(scroll) {
    setTimeout(function() {
        editor2.getSession().setScrollTop(scroll);
    }, 1000);
});

【问题讨论】：

标签： jquery vertical-scrolling ace-editor synchronizing

【解决方案1】：

信息：我为滚动到顶部时发生的崩溃添加了解决方法

终于明白了：

editor.getSession().on('changeScrollTop', function(scroll) {
  editor2.getSession().setScrollTop(parseInt(scroll) || 0)
});

你可以看到一个工作演示here on CodePen

【讨论】：

我试过这个，在浏览器崩溃之前它似乎确实有效。 editor.getSession().on('changeScrollTop', function(scroll) { setTimeout(function() { editor2.getSession().setScrollTop(scroll); }, 1000); });我在它上面设置了一个超时功能来停止它，但是，这真的不是一个很好的解决方案。

【解决方案2】：

ace 中有一个错误会导致您的代码进入无限循环 scroll 实际上不是一个数字，而是一个对象，并且 editor.session.setScrollTop({}) 结果为 scrollTop = NaN。以下代码工作正常

s1 = editor1.session
s2 = editor2.session

s1.on('changeScrollTop', function() {
  s2.setScrollTop(s1.getScrollTop())
});

s2.on('changeScrollTop', function() {
  s1.setScrollTop(s2.getScrollTop())
});

【讨论】：