2012-06-17 14 views
8

私はdhtmlx Gantt Chart UIコンポーネントを使用しています。これにはタスクリストとグラフがあります。タスクリストとグラフチャートは、並列スクロールのために同期された2つの別々のdiv要素に含まれています。チャート領域をスクロールすると、タスクリストが自動的にスクロールされ、タスク行の位置がGanttの行位置と一致します。コンポーネントのソースコードを検査いつかscrollTop/scrollLeftは書き込み不可能なのですか?

、私は同期が以下のコードによって実現されるが見つかりました:

this.oData.onscroll = function() { 
    self.panelTime.scrollLeft = this.scrollLeft; 
    self.panelNames.scrollTop = this.scrollTop; 
}; 

UIコントロールのすべてのHTMLマークアップは、JavaScriptのによって動的に生成されます。 800-ishタスクリストをレンダリングするのに時間がかかりすぎることを除いて、すべてがうまくいきます。

レンダリング時間を短縮するために、独自のサーバーサイドレンダリングモジュールを構築して、元々生成されたクライアントサイドと同じHTMLマークアップを生成することにしました。このマークアップは、クライアント側から通常のjquery $ .get()を使用してフェッチされ、$(el).html()を使用してページに挿入されます。次に、必要なイベントハンドラを元のクライアント側のバージョンとして配置します。

現在、問題は並列スクロールが機能しないことです。グラフ領域でスクロールイベントをキャプチャできましたが、タスクリスト領域のscrollTopプロパティを設定できませんでした。私はfirebugで手動でscrollTopプロパティを強制的にテストしますが、値は変更されませんでした。 scrollTopプロパティは読み取り専用です。

これについて何か説明がありますか?

答えて

9

あなたは、要素の内容の下(または右過去)の下に、下にスクロールすることはできません。要素がoverflow: visible(デフォルト)であるか、少なくともコンテンツの内容と同じであれば、両方のスクロールプロパティは0に固定されます。同様に、スクロールするために表示されていないものがあっても、最後をスクロールする。 scrollTopまたはscrollLeftを理にかなっているより大きい値に設定すると、意味のある最大値に減少します。

私の推測では、あなたがそのコンテンツがロードされる前に、div要素をスクロールしようとしている、そしてビューにスクロールするものがないためにスクロールすることを拒否しています、あなたのケースです。

+0

ありがとうございます。私は配置が間違っていると思うので、scrollTopプロパティは間違ったdivになります。 –

関連する問題