Ich verwende die Komponente "htmlx Gantt Chart UI ", die eine Aufgabenliste und ein grafisches Diagramm enthält. Aufgabenliste und grafisches Diagramm sind in zwei separaten div-Elementen enthalten, die für das parallele Scrollen synchronisiert sind. Durch Scrollen des Diagrammbereichs wird die Aufgabenliste automatisch gescrollt, wodurch die Position der Aufgabenzeile mit der Position der Gantt-Linie übereinstimmt.
Beim Überprüfen des Quellcodes der Komponente habe ich festgestellt, dass die Synchronisierung durch folgenden Code implementiert ist:
%Vor%Alle HTML-Markups im UI-Steuerelement werden dynamisch von JavaScript generiert. Alles funktioniert gut, außer dass es zu lange dauert, um die 800-ische Aufgabenliste zu rendern.
Um die Renderzeit zu verbessern, entschloss ich mich, mein eigenes serverseitiges Rendering-Modul zu erstellen, um das HTML-Markup zu erzeugen, das mit der ursprünglich generierten Client-Seite identisch ist. Dieses Markup wird von der Client-Seite unter Verwendung des normalen jquery $ .get () abgerufen und mit $ (el) .html () in die Seite injiziert. Dann setze ich den notwendigen Event-Handler als die ursprüngliche clientseitige Version.
Das Problem ist jetzt, paralleles Scrollen funktioniert nicht. Ich konnte das Bildlaufereignis im Diagrammbereich erfassen, aber ich konnte die scrollTop-Eigenschaft des Aufgabenlistenbereichs nicht festlegen. Ich teste in Firebug, um die Eigenschaft scrollTop manuell zu erzwingen, aber der Wert hat sich nicht geändert. Es scheint, dass die Eigenschaft scrollTop schreibgeschützt ist.
Gibt es dafür eine Erklärung?
Sie können nicht unterhalb des unteren Inhalts (oder nach rechts) des Inhalts des Elements scrollen. Wenn das Element overflow: visible (Standard) hat oder mindestens so groß wie sein Inhalt ist, bleiben beide Bildlaufeigenschaften auf 0 gesetzt. In ähnlicher Weise werden Sie auch dann nicht angezeigt, wenn etwas ausgeblendet ist, um in die Ansicht zu scrollen in der Lage sein, über das Ende hinaus zu scrollen; Wenn Sie scrollTop oder scrollLeft auf einen größeren Wert als sinnvoll einstellen, wird der Wert auf den größtmöglichen Wert reduziert.
Ich schätze, in Ihrem Fall versuchen Sie, das div zu scrollen, bevor der Inhalt geladen wird, und es wird nicht geblättert, weil es nichts zu scrollen gibt.
Tags und Links javascript html