如何在JavaScript中使用視差效果滾動時解決元素閃爍問題？

Question

我正在嘗試使用JavaScript重新創建具有視差效果的網站。 這意味着我有兩個或更多層，在滾動時移動不同的速度。

在我的情況下，我只移動一層，另一層保持靜態：第1層=網站文本; 第2層=元素背景;

為此，我使用簡單的源代碼（使用jQuery 1.6.4）：

var docwindow = $(window);

function newpos(pos, adjust, ratio){
   return ((pos - adjust) * ratio)  + "px";
}

function move(){
   var pos = docwindow.scrollTop();
   element.css({'top' : newpos(pos, 0, 0.5)});
}

$(window).scroll(function(){
   move();
});

問題： - 所有計算都正確完成，效果“按預期”起作用。 但是在某些瀏覽器下存在一些性能故障（Chrome MAC / Windows，Opera MAC，IE，反而不是Safari）。

滾動期間我看到了什么？ - 滾動時背景與滾動一起向一個方向移動，但似乎偶爾向后跳幾個像素，這會產生非常令人不安的效果（不流暢）。

我嘗試過的解決方案： - 添加一個計時器來限制滾動事件 - 使用短時間的.animate（）方法而不是.css（）方法。

我還觀察到，使用.scrollTo方法（scrollTo jQuery插件）時動畫很流暢。 所以我懷疑觸發滾動事件有點錯誤（太快）。

你有沒有觀察到同樣的行為？ 你知道嗎，怎么解決？ 你能發布更好的解決方案嗎？

感謝所有回復

編輯＃1：在這里你可以找到jsfiddle演示（帶定時器）： http ： //jsfiddle.net/4h9Ye/1/

Answer 1

我認為您應該使用scrollTop（）而將背景位置更改為fixed 。 問題是，將其設置為絕對會使您在向上或向下滾動時默認移動。

出現閃爍是因為位置作為默認瀏覽器滾動的一部分進行更新，並作為腳本的一部分再次更新。 這將呈現兩個位置而不是您想要的位置。 固定后，除非你這么說，否則背景永遠不會移動。

我在http://jsfiddle.net/4h9Ye/2/為您創建了一個演示。