无尽的滚动背景在某些视口尺寸上跳跃

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但是你需要确保即使在检测到结束时你的滚动也会保持平滑滚动。