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

Question

我正在使用一个名为ParticlesJS的库来作为网站背景的一部分-这个库会动态生成一个根据其父元素大小设置的canvas元素，并用动画粒子效果填充它，从而创建一个整洁的效果。话虽如此，我在尝试使用它作为背景时遇到了一些实际问题：

1. 如果canvas元素的大小与内容大小相同，则高度变化（例如添加新内容）后，视觉效果将变得像素化并变形。重新加载库不是解决方案，因为它会产生视觉分散的效果。
2. 如果canvas元素是任意的极端高度，并且没有根据内容调整大小（只是隐藏了溢出部分），则该网站的性能会受到影响，因为该库会消耗过多的CPU能力。
3. 如果在CSS中仅给canvas元素一个fixed位置，则性能会很好并且会保持不变，但是在滚动过程中，它后面的所有内容都会移动，因此看起来不合适。

经过深思熟虑，似乎使其工作的最佳方法是给它适当的大小（例如200％的页面高度），然后使其在滚动过程中无限次重复-性能是可以接受的，并且不会不会有任何失真。但是，我找不到任何方法可以做到这一点-我知道CSS中有一个background-repeat属性，但这似乎仅适用于图像。

有什么方法可以做我想完成的事情吗？欢迎使用基于CSS和JS的答案。

Answer 1

经过一番尝试和错误之后，看来完成我想做的唯一方法是：

1. 创建3个左右的div，每个div的大小与视口大小相同，并垂直堆叠它们
2. 记录用户的滚动活动，并为用户滚动的高度设置为等于视口高度的触发器
3. 点击触发器时，将刚离开视口的div放在列表的末尾，并在以前的位置插入一个空白的div

如果操作正确，这会产生一种效果，用户似乎在无限的背景中滚动，而实际上恰好是3个div不断地重复播放。反向是相同的原理。

不确定如何在还具有滚动位置恢复的系统中使用此功能，但是可以通过等待页面加载然后动态插入足够的间隔符将背景div移动到视图中的适当位置来完成港口。

Answer 2

使用依赖视口尺寸的动画效果的不利之处在于，用户可能会调整浏览器的大小并破坏动画，因此您别无选择，只能捕捉任何视口的大小，在这种情况下，您可能必须重新加载所有内容或重新计算！ / p>

不幸的是，您不能将蛋糕和樱桃放在最上面，因此您要么因为不切实际而放弃“令人印象深刻的效果”，要么采取行动...

2 * (3 * yi.quot + xi.quot)