正文樣式Javascript函數看起來很慢

我已經做了一點Javascript函數來改變身體的背景顏色。但是，它運行時似乎非常緩慢且參差不齊。有誰知道爲什麼以及如何改進代碼，使其運行更流暢？正文樣式Javascript函數看起來很慢

請參閱的jsfiddle的工作例如：僅https://jsfiddle.net/2s2e737w/

\t window.addEventListener('scroll', function() { 
 

 
var fromTop = window.pageYOffset; 
 
document.body.style.backgroundColor = "rgb("+fromTop/5 + ','+fromTop/2 +','+fromTop/3+")"; 
 
    });

body{ 
 
\t margin:0 ; 
 
\t padding: 0; 
 
\t height: 3000px; 
 
    background-color:rgb(0,0,0); 
 
} 
 
p{ 
 
    color:white 
 
}

<p> 
 
Scroll 
 
</p>

來源

2016-08-11 Marco Angelo

你想「反跳」，它 – Quentin

使用[請求動畫幀（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame）可能有幫助，[ jsFiddle]（https://jsfiddle.net/2s2e737w/1/） – Bhavik

你需要閱讀關於滾動處理器性能的教程，它是JavaScript中比較棘手的事情之一。只是谷歌它。 –

使用整數RGB值，十進制值被瀏覽器忽略，這導致感知延遲：

document.body.style.backgroundColor = "rgb(" + 
    parseInt(fromTop/5, 10) + ',' + 
    parseInt(fromTop/2, 10) + ',' + 
    parseInt(fromTop/3, 10) + ")";

百分比值也可以接受：

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb

來源

2016-08-11 15:47:03 dimodi

哇，很順利！非常感謝 –

正文樣式Javascript函數看起來很慢

回答

相關問題