Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why sometime scrollTop/scrollLeft not writable?

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 ?

like image 834
Jimmy Merari Avatar asked Jun 17 '12 02:06

Jimmy Merari


People also ask

Why is scrollTop not working?

If your CSS html element has the following overflow markup, scrollTop will not function. To allow scrollTop to scroll, modify your markup remove overflow markup from the html element and append to a body element.

What does scrollTop mean?

An element's scrollTop value is a measurement of the distance from the element's top to its topmost visible content. When an element's content does not generate a vertical scrollbar, then its scrollTop value is 0 .

What does scrollTop return?

Definition and Usage The scrollTop property sets or returns the number of pixels an element's content is scrolled vertically.


1 Answers

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.

like image 88
Brilliand Avatar answered Oct 17 '22 21:10

Brilliand