为什么有时scrollTop / scrollLeft不可写？ [英] Why sometime scrollTop/scrollLeft not writable?

问题描述

我使用的是具有任务列表和图形图表的dhtmlx甘特图UI组件。任务列表和图形图表包含在两个单独的div元素中，该元素同步并行滚动。通过滚动图表区域，任务列表自动滚动，任务行位置与甘特图行位置匹配。

检查组件源代码，我发现该同步由以下代码实现：

  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属性是只读的。

有没有对此进行任何解释？

解决方案

无法向下滚动到元素内容的底部（或右侧）以下。如果元素的内容为 overflow：visible （默认值），或者至少与其内容一样大，那么两个滚动属性都将保持为0.同样，即使有是隐藏的东西滚动到视图中，那么你将无法滚动结束;如果您将scrollTop或scrollLeft设置为比合理的值更大的值，则会降低到最大值。

我的猜测是您的情况试图在内容加载前滚动div，并且拒绝滚动，因为没有任何内容可以滚动到视图中。

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 ?

解决方案

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.

这篇关于为什么有时scrollTop / scrollLeft不可写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！