javascript - Webkit / 等待DOM更新中的同步重绘？

Question

我在我的网页中像这样操作转换属性以实现滚动效果：

element.style.webkitTransform = "translate(0px, -"+scrollY+"px)";
snapShotPage();

我知道在大多数浏览器中（包括我的经验中的 Webkit）等到脚本执行结束才能进行任何视觉更改，但是在我的情况下，我需要在重绘/重绘发生后snapShotPage()运行，以获得准确的快照。有没有办法做到这一点？

我注意到 usingscrollTop会导致这种行为，但在我的情况下它不是一个选项。有没有避免使用的解决方案setTimeout？

score 4 · Accepted Answer

它总是像 -> 代码 -> 布局 -> 绘画

如果你的一些代码是基于绘制结果的，你必须改变它。浏览器的绘制工作不是同步工作流的一部分，因此您需要事件队列的第二个代码块。

解决方案1：

window.setTimeout(snapShotPage, 0);

解决方案2：

使用requestAnimationFrame并在下一帧调用 snapShotPage 函数。

解决方案3：

1 回答 1