0

Sublime テキスト エディターの右側のミニビューを模倣したスピーチ用の Javascript UI を構築しようとしています。テキストをメインの div にロードした後、そのテキストを右側のはるかに狭い div に複製し、font-sizeとline-heightを非常に小さな値に設定しています。

これは、古い一般教書演説アドレスを使用した jsFiddle の動作デモです: http://jsfiddle.net/chriswilsondc/NYSSa/

ご想像のとおり、黄色の div は動的にサイズ変更され、左側のビューのテキストの表示部分を表します。次に、左側のペインのスクロール バーの動作を模倣する黄色のボックスにドラッグ イベントをアタッチします。右側のボックスのドラッグ動作にバインドするには、左側のスクロール バーのネイティブ機能が必要です。私の質問はより一般的ですが、私は YUIdragモジュールを使用しています (と思います)。

現時点では、一方がアクティブ化されているときに一方を手動で動かすという単純な (ずさんな場合でも) 問題です。

//right-hand side
dd.on("drag:drag", function(e) {
    console.log("dragged", e);
    var percentScrolled = Y.one("#pane").get('offsetTop') / ht_aer;
    //scroll the left side
    Y.one("#text").set("scrollTop", percentScrolled * ht_text_comp);
    //parallax scrolling of small-text version
    Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);
});


//left-hand side
Y.one("#text").on("scroll", function(e) {
    console.log("scrolled", e);
    var percentScrolled = e.currentTarget.get('scrollTop') / ht_text_comp;
    //parallax scrolling of small-text version
    Y.one(".aerial .complete").setStyle("top", -ht_aer_comp * percentScrolled);
    //manual drag 
    Y.one("#pane").setStyle('top', ht_aer * percentScrolled);
});

ただし、コンソール ログを見ると、逆火イベントがあることがわかります。div をドラッグしてスクロール バーをプログラムで変更すると、「scroll」イベントが発生し、最初にマウスで呼び出したドラッグ イベントをプログラムで発生させようとします。無限に発火しないことに少し驚いています。これは賢明ではないようです。

手動アクションによって呼び出された場合にのみイベントを発生させる方法はありますか? または、これら 2 つの異なるイベントをリンクするより良い方法はありますか? ソリューションが YUI を使用しなくてもかまいません。これは、私が慣れ親しんでいるフレームワークです。ありがとう。

4

2 に答える 2

0

@Riache は、イベントの無限ループを作成しない理由を説明しました。ただし、潜在的な視覚的な不具合を回避するために、ドラッグ中にスクロール イベントが発生しないようにすることもできます。したがって、基本的には、ドラッグを開始したときにスクロールイベントのリッスンを停止し、ドラッグが完了した後にスクロールイベントのリッスンを再開するという考え方です。

drag:start YUI では、およびdrag:endイベントを使用できます。このようなもの：

function scrollHandler() {
  // ...
}

var scrollNode = Y.one('#foo');
scrollNode.on('scroll', scrollHandler);

dd.on('drag:start', function () {
  scrollNode.detach('scroll', scrollHandler);
});

dd.on('drag:end', function () {
  scrollNode.on('scroll', scrollHandler);
});
于 2013-06-07T12:43:11.423 に答える