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

Question

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

查看组件源码，发现同步是通过以下代码实现的:

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

UI 控件中的所有 HTML 标记均由 JavaScript 动态生成。除了渲染 800 条左右的任务列表需要很长时间外，一切都运行良好。

为了缩短渲染时间，我决定构建自己的服务器端渲染模块来生成与最初生成的客户端相同的 HTML 标记。此标记使用普通 jquery $.get() 从客户端获取，并使用 $(el).html() 注入(inject)页面。然后我将必要的事件处理程序作为原始客户端版本。

现在的问题是平行滚动不起作用。我可以捕获图表区域的滚动事件，但我无法设置任务列表区域的 scrollTop 属性。我在 Firebug 中测试手动强制 scrollTop 属性，但值没有改变。 scrollTop 属性似乎是只读的。

有什么解释吗？

Answer 1

您不能向下滚动到元素内容的底部(或越过右侧)。如果元素有 overflow: visible(默认值)，或者至少与其内容一样大，那么两个滚动属性都将停留在 0。同样，即使有隐藏的东西可以滚动到view，那么你将无法滚动到最后；如果您将 scrollTop 或 scrollLeft 设置为大于合理的值，它将减小到合理的最大值。

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