快速滚动页面时jQuery scrollTop（）精度（避免像素丢失）

Question

我正在使用jQuery scrollTop（）值来更改页面滚动中的元素不透明度

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

它工作正常，但问题是，如果我快速滚动页面，它会跳过＆＃39;很多像素，导致丑陋的效果，因为返回的像素是例如。

0
30
50
80
90
...

而不是

0
1
2
3
4

就像我慢慢滚动...

还有一次我有同样的问题，我需要平滑的值，但这个＆＃34;像素跳过＆＃34;行为复杂的事情......

我该如何解决这个问题？

Answer 1

如果你想让事情顺利，你应该为元素添加一个CSS过渡。因此，即使滚动从0跳到500，转换也将保持平滑。

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

尝试在jQuery中实现平滑的像素值无法正常工作。