jquery - 快速滚动页面时的 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 中实现平滑的像素值是行不通的。