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

Question

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

1. 如果画布元素与内容的大小相同，如果高度发生变化（例如添加新内容），视觉效果会变得像素化和扭曲。重新加载库并不是解决此问题的方法，因为它会产生视觉上的干扰效果。
2. 如果画布元素是任意极端高度且未根据内容调整大小（溢出只是隐藏），则网站的性能会受到影响，因为库会消耗过多的 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

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

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

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!

 }