javascript - 如何提供动态(计算的)CSS 属性

Question

我正在处理一项任务，每次用户滚动或调整屏幕大小时，我都想重新计算元素的 css 属性。

假设我想暗示。一个进度条，根据窗口中的滚动位置报告进度

<div class='progress-bar-wrap'>
   <div class='progress-bar-progress'></div>
</div>

function updateScrollProgress () {
   this.progressIndicator.css('width', this.calculateProgressBarWidth() + 'px');
}

我试图 Hook 滚动和调整大小事件，但这似乎有一个滞后的效果。

window.on('scroll', updateScrollProgress)
window.on('resize', updateScrollProgress)

我尝试在滚动和调整大小事件处理程序中使用 requestAnimationFrame

window.on('scroll', function(){window.requestAnimationFrame( updateScrollProgress))
window.on('resize', function(){window.requestAnimationFrame( updateScrollProgress))

在大多数浏览器中都经历了巨大的改进，但偶尔也会出现延迟。

我尝试从 requestAnimationFrame 处理程序请求另一个帧:

function updateScrollProgress () {
   window.requestAnimationFrame( updateScrollProgress)
   this.progressIndicator.css('width', this.calculateProgressBarWidth() + 'px');
}

这完全消除了滞后效应，但带来了无限循环调用此方法的成本，即使不需要重新计算也是如此。

有没有办法在浏览器决定绘制元素之前挂接处理程序，以便我可以为属性提供/设置那些“动态”css 值？

Answer 1

当您使用requestAnimationFrame 时，您在做什么。如果您已经摆脱了使用它的延迟，就不清楚为什么您说该功能运行“过于频繁”。通常在这种情况下，“太频繁”意味着“导致滞后”(通过过于频繁地运行并减慢速度)。如果你的不是，那么......？

如果您希望处理程序调用的频率较低，您可以对其进行去抖动，但随后您可能会注意到在您想要的更改之前出现延迟(因为您已经去抖动了)，这听起来像是您要避免的.

无论如何，requestAnimationFrame 至少目前是“在浏览器呈现帧之前”工作的正确工具。