I'm using dhtmlx Gantt Chart UI component which have task list and graphical chart. Task list and graphical chart are contained in two separate div element which synchronized for parallel scrolling. By scrolling the chart area, task list is automatically scrolled resulting the task row position matches the Gantt line position.

Inspecting the component source code, I found the sync is implemented by the following code :

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

All HTML markup in the UI control are generated dynamically by JavaScript. All is working well except it takes too long time to render 800-ish task list.

To improve rendering time, I decide to built my own server side rendering module to generate the HTML markup identical with that originally generated client side. This markup is fetched from client side using ordinary jquery $.get() and injected to page using $(el).html(). Then I put the necessary event handler as the original client side version.

The problem now is parallel scrolling doesn't work. I could capture the scroll event on the chart area, but I couldn't set the scrollTop property of the task list area. I test in firebug to manually force the scrollTop property, but the value didn't change. It seems that scrollTop property is read-only.

Is there any explanation for this ?

I'm using dhtmlx Gantt Chart UI component which have task list and graphical chart. Task list and graphical chart are contained in two separate div element which synchronized for parallel scrolling. By scrolling the chart area, task list is automatically scrolled resulting the task row position matches the Gantt line position.

Inspecting the component source code, I found the sync is implemented by the following code :

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

All HTML markup in the UI control are generated dynamically by JavaScript. All is working well except it takes too long time to render 800-ish task list.

To improve rendering time, I decide to built my own server side rendering module to generate the HTML markup identical with that originally generated client side. This markup is fetched from client side using ordinary jquery $.get() and injected to page using $(el).html(). Then I put the necessary event handler as the original client side version.

The problem now is parallel scrolling doesn't work. I could capture the scroll event on the chart area, but I couldn't set the scrollTop property of the task list area. I test in firebug to manually force the scrollTop property, but the value didn't change. It seems that scrollTop property is read-only.

Is there any explanation for this ?

• javascript
• html

1 Answer 1

You can't scroll down below the bottom (or past the right) of the element's contents. If the element has overflow: visible (the default), or is at least as large as its contents, then both scroll properties will be stuck at 0. Similarly, even if there is something hidden to scroll into view, then you won't be able to scroll past the end; if you set the scrollTop or scrollLeft to a larger value than makes sense, it will decrease to the largest value that makes sense.

My guess is in your case you're trying to scroll the div before its content is loaded, and it's refusing to scroll because there isn't anything to scroll into view.