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，那么总是很难跟上。

你能做的就是其中一件事：

在您的情况下，position: fixed;可能是一个不错的选择。
如果没有，那么让事件处理程序在将来启动一个100毫秒的计时器，取消该进程中的任何先前计时器。这样，只有在滚动停止或暂停后才会更新DOM。
如果您想要持续更新，请在执行更新时跟踪时间戳，如果处理程序的时间少于一定时间（100毫秒或其他），则不执行任何操作。

Answer 2

function debounce(func, wait) {
    var timeout;
    return function() {
        var context = this, 
            args = arguments,
            later = function() {
                timeout = null;
                func.apply(context, args);
            };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}
$('.inbox').scroll(debounce(function() {
    $(this).find('.inbox-headers').css('top', $(this).scrollTop());
}, 100));

这是一个很小的去抖功能，我在这种情况下经常使用它。

Answer 3

执行静态标头的最佳方法是严格分隔表格的标题和正文：

然后你应该应用溢出：滚动样式到.body DIV

没有绝对定位
无滚动事件

如果你的桌子很宽，那么在任何情况下你都需要使用滚动事件

应用于scroll事件时，jQuery css（）滞后

3 个答案: