非图像div上无限大的垂直滚动

Question

我使用一个名为ParticlesJS的库作为我的网站背景的一部分--这个库动态生成一个根据父元素大小的画布元素，并将其填充到动画粒子效果中，从而创造出一个整洁的效果。尽管如此，我在试图以它作为背景时遇到了一些实际问题：

1. 如果画布元素与内容大小相同，则当高度发生变化(例如添加新内容)时，视觉效果会变得像素化和扭曲。重新加载库并不能解决这个问题，因为它会造成视觉上的分散注意力的效果。
2. 如果画布元素是任意的极端高度，而不是根据内容大小(溢出只是隐藏的)，那么网站的性能就会受到影响，因为库消耗了过多的CPU能力。
3. 如果画布元素在CSS中被简单地赋予了一个fixed位置，那么它的性能是很好的，而且它是固定的，但是它看起来不太合适，因为它后面的所有东西都在滚动过程中移动。

经过一些考虑后，这似乎是最好的方式使它工作是给它一个适度的大小(如200%的页面高度)，然后使它在滚动无限重复-性能将是可以接受的，不会有任何扭曲。但是，我没有办法做到这一点-我知道在CSS中有一个background-repeat属性，但这似乎只适用于图像。

有什么办法能做我想做的事吗？欢迎基于CSS和JS的答案。

Answer 1

经过一些尝试和错误之后，似乎完成我所要做的事情的唯一方法如下：

1. 创建3个左右的背景div，每个都是视图端口的大小，并将它们垂直堆叠。
2. 记录用户滚动活动，并为用户滚动等于视图端口高度的高度设置触发器。
3. 当触发器被击中时，将刚刚离开视图端口的div放置在列表的末尾，并在过去的位置插入一个空间隔div。

如果操作正确，这就会产生一种效果，即用户显然是在无限大的背景中滚动，而实际上是相同的3左右div被一遍又一遍地移动。倒向是同样的原则。

不知道如何在同样具有滚动位置恢复的系统中工作，但它可能可以通过等待页面加载，然后动态插入足够的间隔以将背景div移动到视图端口中的适当位置来完成。

Answer 2

使用依赖于视图大小的动画效果的缺点是，用户可能调整浏览器的大小并破坏您的动画，因此您别无选择，只能捕捉任何视口大小，在这种情况下，您可能需要重新加载所有内容或重新计算！

你不能把蛋糕和樱桃放在最上面，所以你要么放弃“令人印象深刻的效果”的想法，因为它们是不切实际的，要么采取行动…

document.body.onresize=function(){Adjustments();};


function Adjustments(){

 var W=Container.offsetWidth, H=Container.offsetHeight;


 // You've now got the new resolution so go for your life!

 }