无限滚动背景在某些视口大小处跳转

Question

我正在尝试创建视差星空。这其实一点都不难。我正在使用 Velocity.js，它使无尽的滚动非常流畅。我注意到虽然在某些视口尺寸下，图像会因某种原因而跳跃。我试图研究这个问题并修改我的代码，但无济于事。我做了一个小提琴https://jsfiddle.net/hunterjr88/gkae3up5/1/，来展示我在说什么。调整窗口大小并在滚动时查看图像跳跃。

$(document).ready(function(){
function infinite(){
            $('#stars').velocity({'backgroundPositionY':['100vh','0vh']},
                              {duration: 2000,easing: 'linear'}); 
            infinite();
}
infinite();
});   

Answer 1

我不知道velocity.js，但我可以看到问题并且可以解释发生了什么。

您的滚动检测到滚动结束，因为这是一个无限滚动，它将继续滚动而不会停止，当它检测到结束时，它会将滚动跳回顶部，这就是您看到此跳转的原因。

正如我告诉你的，我不知道 velocity.js 但是你需要确保即使检测到结束，你的滚动也会继续平滑滚动。