jquery onscroll 在硬滚动时跳过值

Question

我正在使用 jQuery 'scroll' 事件更新 div 职位

当我缓慢滚动时它工作正常，但当我快速滚动时它会跳过一些 $(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 次？只需渲染一帧即可完成。

所以它会说 "Hey I've moved to pixel 10" 而不是 "I've moved to 1"、"I've moved to 2"、"I've moved to 3, etc"。

它的效果是，它可以在一帧内从 50 变为 70，并让您有效地停留在 50。因为您只是为了 70 像素而丢弃了 70 消息。使用此代码，您基本上将 70 像素的消息视为 60 像素的消息。

jquery onscroll 在硬滚动时跳过值

jquery onscroll skips values when hard scroll

jquery

onscroll