强制javascript在*浏览器重绘之前运行*（jsFiddle示例）

Question

我正在使用HTML表格构建一个基于Web的小应用程序。该表的一个不寻常的特性是它具有固定的顶行和左列（类似于excel）。我使用一点jQuery和CSS完成了这个。

问题是，触发我的代码的jQuery事件是$（window）.scroll事件，显然大多数浏览器（Chrome和IE）在此事件调用的代码完成运行之前重绘页面。因此，左列和顶行需要一瞬间“赶上”表格的其余部分。

我提供了一个stripped down jsFiddle example来向您展示我的问题。 注意：当表格太小而且（相对而言）没有内容时，滞后不是很明显。不过，它就在那里（假设你没有使用firefox）。有没有办法摆脱这种滞后？

谢谢！

Answer 1

只是一个想法，但也许值得考虑：您可以尝试使用this article中描述的requestAnimationFrame（或以类似的方式）。这可能会消除更新/“滞后”问题。

Answer 2

我没有使用scroll事件或requestAnimationFrame。我最终做的是附加到mousewheel事件，该事件在滚动和渲染发生之前触发。如果滚动事件向下，我可以及时应用适当的类进行渲染。