Question

我有两个同时运行的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);
});

Answer 1

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

终于明白了：

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

您可以看到有效的演示here on CodePen

Answer 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())
});

Ace Editor同步滚动

2 个答案:

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