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

Question

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

1. 如果 Canvas 元素与内容大小相同，则视觉效果会在高度发生变化(例如添加新内容)时发生像素化和扭曲。重新加载库不是解决此问题的方法，因为它会产生视觉上分散注意力的效果。
2. 如果 canvas 元素是任意极端高度并且未根据内容调整大小(简单地隐藏了溢出)，则网站的性能会受到影响，因为库会消耗过多的 CPU 能力。
3. 如果在 CSS 中简单地为 canvas 元素指定一个固定位置，则性能良好并且它会固定，但它看起来不合适，因为它后面的所有内容在滚动过程中都会移动。

经过一些考虑，让它工作的最好方法似乎是给它一个适度的大小(比如 200% 的页面高度)，然后让它在滚动期间无限重复 - 性能是可以接受的，并且不会'不会有任何失真。但是，我找不到任何方法来执行此操作 - 我知道 CSS 中有一个 background-repeat 属性，但这似乎只适用于图像。

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

Answer 1

经过一些尝试和错误，看起来完成我想要做的事情的唯一方法如下:

1. 创建 3 个左右的背景 div，每个都是视口(viewport)的大小，并将它们垂直堆叠
2. 记录用户滚动事件，并设置当用户滚动高度等于视口(viewport)高度时的触发器
3. 当触发器被触发时，将刚刚离开视口(viewport)的div放在列表的末尾，并在原来的位置插入一个空的间隔div

如果操作正确，这会产生一种效果，用户显然是在无限背景中滚动，而实际上只是 3 个左右的 div 一遍又一遍地随机播放。反过来也是一样的道理。

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