快速滚动页面时的jQuery scrollTop()精度(避免像素丢失)
快速滚动页面时的jQuery scrollTop()精度(避免像素丢失)
提问于 2016-10-14 17:42:35
我正在使用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就像我慢慢滚动的时候...
还有一次，我遇到了同样的问题，我需要平滑值，但这种“像素跳跃”行为使事情变得复杂…
我该如何解决这个问题呢？
回答 1
Stack Overflow用户
发布于 2016-10-14 17:50:37
如果你想让事情变得顺畅，你应该给元素添加一个CSS过渡。因此，即使滚动从0跳到500，过渡也将保持平滑。
#elem {
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}仅在jQuery中尝试实现平滑的像素值是行不通的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40039985
复制相关文章
相似问题
腾讯云开发者
