javascript - jQuery 的 css() 在应用于滚动事件时滞后

Question

我正在尝试实现一个简单的“固定标题”表。我知道这在理论上只能用 CSS 来完成，但是当涉及到 OSX Lion 及其消失的滚动条时，它效果不佳。所以我用 jQuery 来做。

方法很简单，只有 1.5 行代码:

$('.inbox').scroll(function() {

    $(this).find('.inbox-headers').css('top', $(this).scrollTop());

});

<强> Demo 。

这在 Firefox 中运行良好且流畅，但在 webkit 浏览器中严重滞后。为什么会发生这种情况以及如何优化此代码？或者也许以不同的方式解决问题。

Answer 1

“scroll”事件非常频繁触发。如果您在某些浏览器中滚动时修改 DOM，那么总是很难跟上。

您可以做以下事情之一:

1. 就您的情况而言，position:fixed; 可能是一个不错的选择。
2. 如果没有，则让事件处理程序在未来启动大约 100 毫秒的计时器，并取消进程中任何先前的计时器。这样，DOM 仅在滚动停止或暂停后才会更新。
3. 如果您想要连续更新，请在执行更新时跟踪时间戳，如果时间少于某个时间(100 毫秒或其他)，则在处理程序中不执行任何操作。