2

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

方法很简单，只需 1.5 行代码：

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

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

});

演示。

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

4

3 回答 3

8

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

您可以做的是以下其中一项：

  1. 在您的情况下，position: fixed;可能是一个不错的选择。
  2. 如果没有，则让事件处理程序在未来启动一个 100 毫秒的计时器，取消该过程中的任何先前计时器。这样，DOM 只会在滚动停止或暂停后更新。
  3. 如果您想要连续更新，请在进行更新时跟踪时间戳，如果少于一定时间（100 毫秒或其他时间），则在处理程序中不执行任何操作。
于 2012-06-17T23:15:17.753 回答
0 
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-17T23:33:08.303 回答
0

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

然后你应该只对 .body DIV 应用一个溢出：滚动样式

  1. 无绝对定位
  2. 没有滚动事件

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

于 2012-06-17T23:40:35.883 回答