Синхронная прокрутка редактора Ace


У меня есть две одновременные сессии редактора Ace, работающие бок о бок, я пытаюсь синхронизировать вертикальную прокрутку обоих редакторов. Я нашел простой метод 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. Я просматривал здесь API Ace: виртуальный рендерер для решения проблемы, но я даже не могу установить обратный вызов функция при прокрутке в Редакторе.

В API есть ссылка на полосу прокрутки здесь, но никак не могу заставить его что-нибудь сделать. Ив'е попробовал проверить это таким образом...

editor.ScrollBar.on('scroll', function() {
    alert('Callback?');
});
Не мог бы кто-нибудь помочь мне в этом деле? :) Спасибо.

EDIT

Решение, приведенное ниже, действительно работает, но (в моем случае) оно почти сразу же приводит к сбою браузера (Chrome). Я установил функцию таймаута на нем, чтобы ограничить, как быстро он может стрелять, но это все равно неизбежно крахи. Идеи?

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

2 ответа:

Информация: я добавил обходной путь для сбоя, происходящего при прокрутке к началу

Наконец-то понял:

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

Вы можете увидеть рабочую демонстрацию здесь на CodePen

В ace есть ошибка, из-за которой ваш код переходит в бесконечный цикл на самом деле scroll-это не число, а объект и редактор.сессия.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())
});