12

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

对此有什么解释吗？

4

1 回答 1

14

您不能向下滚动到元素内容的底部（或右侧）下方。如果元素有overflow: visible（默认），或者至少与其内容一样大，那么两个滚动属性都将停留在 0。同样，即使有隐藏的东西可以滚动到视图中，你也不能滚动到最后；如果将 scrollTop 或 scrollLeft 设置为比有意义的值更大的值，它将减小到有意义的最大值。

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

于 2012-06-17T06:02:48.460 回答