为什么有时scrollTop / scrollLeft不可写？

Question

我正在使用具有任务列表和图形图表的dhtmlx Gantt Chart 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属性是只读的。

对此有任何解释吗？

Answer 1

您无法向下滚动元素内容的底部（或右侧）。如果元素具有overflow: visible（默认值），或者至少与其内容一样大，则两个滚动属性都将停留在0.同样，即使有隐藏的内容滚动到视图中，您也赢了不能滚动到最后;如果你将scrollTop或scrollLeft设置为一个更大的值而不是有意义的话，它将减少到有意义的最大值。

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