jQuery css动画滚动时抖动

enter image description here jQuery css动画滚动时抖动

我有这个外部div，包含一个表。我想要的是当我水平滚动外部div时，表格的标题保持不变。我通过创建一个只包含头部的新表，可以肯定地做到这一点，这个divheader是绝对位置：0;

当外部div滚动时，divheader的左边位置等于outer 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上测试它

来源

2014-01-08 QuangTV

你能设置一个小提琴吗？ – Shashank

@Shashank我已经添加了小提琴 – QuangTV

而不是在scroll()上设置left属性，为什么不将#divheader位置设置为fixed。

请参阅demo。

编辑：

它找不到任何技术，以防止摇晃/干#divheader上scroll()优于只设置它position:fixed。所以不是我做了一个解决方案，使该固定元件上向下滚动：

首先，我们需要换一个<div>#divheader表，我们将设置在#outerDiv的scrollTop()价值的scrollTop()位置基地。

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

然后，我们需要设置此包装的height等于给#outerDiv的高度，所以不会上溢。由于滚动条的缘故，获得#outerDiv的高度有点棘手。我提出的最佳解决方案是获取的元素，它在#outerDiv内设置为100%。

//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。

来源

2014-01-08 04:35:08

我希望我能。问题是我有一个有限的外部div高度，有时我不得不向下滚动时表格很长 – QuangTV

是的，我明白了。我已经更新了我的答案，我认为没有比设置'position：fixed'更平滑的方式，所以相反，我为您提供了一个解决方案，让您能够向下滚动这个固定元素。 –

太好了，多亏了你，现在我解决了这些问题。我创建了一个包装器来包装它。而不是改变表格的左侧位置，现在我改变了左侧的余量。非常感谢Mark！ – QuangTV

jQuery css动画滚动时抖动

回答

相关问题