jQuery的时候很难滚动

Question

我更新使用jQuery“滚动”一个div位置onscroll跳过值事件

当我慢慢地滚动它工作正常，但是当我快速地滚动它跳过一些$(window).scrollTop()值，所以在最后的格结果未对齐

$(window).on('scroll', function(){ 
    var scroll = $(window).scrollTop(); 
    if(scroll > 0 && scroll < 60){ 
     $('#div').css('top', 80 - scroll+'px'); 
    } 
    console.log(scroll); 
}); 

我该怎么办？

Answer 1

解决这不只是设置它，当你在一定范围内的像素会滚动，而且在边界设置它，像这样的方式：

$(window).on('scroll', function(){ 
    var scroll = $(window).scrollTop(); 
    if(scroll > 0 && scroll < 60){ 
     $('#div').css('top', 80 - scroll+'px'); 
    } else if (scroll <= 0) { 
     $('#div').css('top', '80px'); 
    } else { 
     $('#div').css('top', '20px'); 
    } 
    console.log(scroll); 
}); 

发生的原因问题浏览器正试图节省处理能力。毕竟，如果你要在一帧中移动10个像素，为什么要渲染10次？只需渲染一帧即可完成。所以它会说“嘿，我已经移动到像素10”，而不是“我已经移动到1”，“我已经移动到2”，“我已经移动到3，等等”。

这样做的效果是，它可以从一帧中的50到70，并让你实际上停留在50.因为你只是扔掉70个像素的70个信息。有了这个代码，你可以将70像素信息当作基本上的60像素信息。