javascript - 视差滚动断断续续

Question

我正在尝试为我的网站获得一个漂亮的视差滚动效果，只要我使用滚动条滚动页面，它看起来就不错。但是当我使用鼠标滚轮键盘时 - 它真的很不稳定和滞后。这是负责视差的 JS 的一部分。

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

有人能告诉我为什么它不稳定吗？我试图将背景图像的大小调整为较小的，但这似乎不是问题，因此我的法力严重不足，不知道我做错了什么。任何帮助，将不胜感激。

Answer 1

我遇到了同样的问题，并找到了一个巧妙的技巧来解决这个问题。“最后的开发者”发现你必须固定背景位置并逆着滚动方向工作:

$(window).scroll(function(){
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){
         var temp =  100 - ($(document).scrollTop() - 1200) / 8;
         var bonus = '50% ' + temp*-1 + '%';
         document.getElementById('div').style.backgroundPosition = bonus;
    }
}

将此 css 用于您的 div

background-attachment: fixed;

这绝对让我感觉顺畅多了。来源:The Last Developer