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動畫滾動時抖動

回答

相關問題