应用于scroll事件时,jQuery的css()滞后

Question

我正在尝试实现一个简单的"固定标头"表.我知道理论上这只能用CSS完成,但是当涉及到OSX Lion及其消失的滚动条时,它不能很好地工作.所以我用jQuery做这件事.

方法很简单,只需1.5行代码:

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

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

});

演示.

这在Firefox中运行良好且流畅,但在webkit浏览器中可怕地落后.为什么会发生这种情况？如何优化此代码？或者可能以不同方式处理问题.

Answer 1

该"滚动"事件被触发非常频繁.如果你在某些浏览器中滚动时修改DOM,那么总是很难跟上.

你可以做的是这些事情之一:

1. 在你的情况下,position: fixed;可能是一个很好的选择.
2. 如果没有,则让事件处理程序在将来启动一个100毫秒的计时器,取消该进程中的任何先前计时器.这样,只有在滚动停止或暂停后才会更新DOM.
3. 如果要进行连续更新,请在执行更新时跟踪时间戳,如果处理程序的时间少于某个时间(100毫秒或其他),则不执行任何操作.