Question

I have two simultaneous Ace editor sessions running side-by-side, I’m trying to synchronize vertical scrolling of both editors. I found a simple jQuery method that works with normal Divs, but how can I adapt it to work correctly with Ace?

jQuery method:

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

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

Obviously, the above method doesn’t work with Ace. I’ve been looking through the Ace API here: Virtual Renderer for a solution, but I can’t even seem to set any callback function when scrolling on the editor.

There’s a reference to scrollbar in the API Here, but can’t seem to get it to do anything. Iv’e tried testing it like so…

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

Could somebody please help me on this one? 🙂 Thanks.

EDIT

The solution below does work, but (in my case) it crashes the browser (Chrome) almost immediately. I set a timeout function on it to limit how quickly it can fire, but it still inevitably crashes. Ideas?

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

Answer 1

Info: I added a workaround for the crash happening when scrolling to top

Finally got it :

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

You can see a working demo here on CodePen