滚动时jQuery css动画抖动

Question

我有这个外部 div，包含一个表格。 我想要的是当我水平滚动外部 div 时，表格的标题保持固定。我已经通过创建一个只包含标题的新表来做到这一点，这个 divheader 是绝对位置左侧：0;

外层div滚动时，divheader的左边位置等于外层div scrollLeft。

$('#outerDiv').scroll(function () {
    var left = $('#outerDiv').scrollLeft();
    $('#divheader').css('left', left);                
});

这在 Firefox 上运行良好，但在 chrome 上，divheader 有时会在快速滚动时晃动。在 IE(10) 上，它一直在抖动。

我的问题是如何避免 IE 和 chrome 上的抖动。

请考虑这个提琴手：http://jsfiddle.net/Y7xZm/11/。在IE上测试一下

Answer 1

与其在scroll() 上设置left 属性，不如将#divheader 位置设置为fixed。

看到这个demo。

---

编辑：

它找不到任何技术来防止 #divheader 在 scroll() 上的抖动/生涩，而不是仅将其设置为 position:fixed。因此，我提出了一个解决方案，可以在该固定元素上向下滚动：

首先，我们需要将#divheader 表包装在<div> 上，然后根据#outerDiv 的scrollTop() 值设置其scrollTop() 位置。

$('#outerDiv').scroll(function() {
    var top = $('#outerDiv').scrollTop();
    $('#headerWrapper').scrollTop(top);    
});

然后我们需要将此包装器的height 设置为等于#outerDiv 的高度，这样它就不会溢出。由于滚动条，获取#outerDiv 的高度有点棘手。而我想出的最佳解决方案是将元素的height 设置为100% 在#outerDiv 内。

//create a new element with height 100% inside the '#outerDiv'
var p = $('<p style="height: 100%;"/>');
$('#outerDiv').append(p);
//get the elements height then remove it
var h = p.height();
$(p).remove();
//set the wrapper's height
$('#headerWrapper').height(h);

这里是jsfiddle。