jQuery的css（）滞后时应用滚动事件

我试图实现一个简单的“固定头”表。我知道这在理论上可以用CSS来完成，但是在OSX Lion及其消失的滚动条方面，它并不适用。所以我用jQuery来做。jQuery的css（）滞后时应用滚动事件

的方法很简单，它只是1.5的代码行：

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

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

});

Demo。

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

来源

2012-06-17 Arnold

您是如何解决这个问题的？谢谢！ –

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

你可以做的是这些东西：

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

来源

2012-06-17 23:15:17 Pointy

尖尖的，你能解释一下3号的更多细节吗？我很感兴趣.... – Till

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));

这是一个有点抖功能，我用了很多这样的情况。

来源

2012-06-17 23:33:08

这不适合我。结果是一样的 –

做静态头，最好的办法是头和表体严格分开：

那么你应该申请一个溢出：滚动的风格。体DIV只

没有绝对定位
没有滚动事件

如果表格非常宽，那么无论如何您需要使用滚动事件

来源

2012-06-17 23:40:35 odiszapc

jQuery的css（）滞后时应用滚动事件

回答

相关问题