jQuery的scrollTop的（）精度快速滾動頁面時（避免像素損失）

Question

我使用jQuery scrollTop的（）值來改變頁面滾動的元素透明度

$(document).on('scroll', function(){ 
    if($(document).scrollTop() >= 1){ 
     $('#elem').css({'opacity': ($(document).scrollTop() * 0.02)}); 
    } 
}); 

它工作正常，但問題是，如果我快速滾動頁面會「跳過」很多像素，導致一個醜陋的效果，因爲返回的像素是例如

0 
30 
50 
80 
90 
... 

，而不是

0 
1 
2 
3 
4 

就像當我慢慢地滾動...

而且其他時間我有同樣的問題，在這裏我需要平滑值，但這種「像素跳躍」的行爲複雜化東西...

我該如何解決這個問題？

Answer 1

如果你想讓事情平滑，你應該添加一個CSS過渡到元素。因此，即使滾動從0跳到500，轉換仍然平穩。

#elem { 
    -webkit-transition: opacity 0.5s ease; 
    -moz-transition: opacity 0.5s ease; 
    transition: opacity 0.5s ease; 
} 

試圖在jQuery中實現平滑的像素值不會工作。