2

我有两个同时运行的 Ace 编辑器会话，我正在尝试同步两个编辑器的垂直滚动。我找到了一个适用于普通 Div 的简单 jQuery 方法，但我怎样才能使其适应 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);
});
4

2 回答 2

6

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

终于明白了：

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

你可以在 CodePen 上看到一个工作演示

于 2013-02-07T13:09:41.480 回答
2

ace 中有一个错误使您的代码进入无限循环滚动实际上不是一个数字，而是一个对象，并且 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())
});
于 2013-02-08T06:31:18.287 回答