Question

我正在使用jQuery更新div位置＆＃39;滚动＆＃39;事件

当我慢慢滚动时它工作正常，但是当我快速滚动它会跳过一些$(window).scrollTop()值，所以最后div结果错位

$(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次？只需渲染一帧即可完成。

所以它会说＆＃34;嘿，我已经转移到像素10＆＃34;而不是＆＃34;我已经搬到1＆＃34;，＆＃34;我已经搬到了2＆＃34;，＆＃34;我已经搬到了3，等等＃34 ;

这样的效果是，它可以在一帧中从50到70，并让你有效地卡在50.因为你只丢掉了70个像素的70条消息。使用此代码，您将70像素消息视为60像素消息。

当硬滚动时，jquery onscroll会跳过值

1 个答案: