2

同時に 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 for a solutionですが、エディターをスクロールするときにコールバック関数を設定することさえできないようです。

API Hereには scrollbar への参照がありますが、何も実行できないようです。私はそれをテストしようとしました...

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にはバグがあり、コードを無限ループに移行させるのは実際には数値ではなく、object and 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 に答える