12

タスク リストとグラフィカル チャートを持つ dhtmlx ガント チャート UI コンポーネントを使用しています。タスク リストとグラフィカル チャートは、並列スクロール用に同期された 2 つの個別の div 要素に含まれています。チャートエリアをスクロールすることで、タスクリストが自動的にスクロールされ、タスク行の位置とガントラインの位置が一致します。

コンポーネントのソース コードを調べたところ、次のコードによって同期が実装されていることがわかりました。

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

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

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

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

これについて何か説明はありますか？

4

1 に答える 1

14

要素のコンテンツの下部（または右側を超えて）を下にスクロールすることはできません。要素にoverflow: visible（デフォルト）がある場合、または少なくともその内容と同じ大きさの場合、両方のスクロールプロパティは0のままになります。同様に、ビューにスクロールするために非表示になっているものがある場合でも、終わりを超えてスクロールします。scrollTopまたはscrollLeftを意味のある値よりも大きい値に設定すると、意味のある最大値に減少します。

私の推測では、コンテンツが読み込まれる前にdivをスクロールしようとしていて、ビューにスクロールするものがないため、スクロールを拒否しています。

于 2012-06-17T06:02:48.460 に答える