添加particleground JavaScript背景特效为何导致页面控件失效？

遇到这种粒子背景挡住内容交互、无法滚动的情况，大概率是这个JS库的默认行为和Divi主题的布局产生了冲突，下面是几个常见原因和对应的解决办法：

1. 粒子画布层级过高，覆盖了内容 #

Particleground会生成一个<canvas>元素作为粒子载体，默认情况下这个画布可能和你的内容容器处于同一层级甚至更高，导致链接、文本被“盖住”无法点击/选中。

解决办法：
给你的内容区域（比如Divi的模块容器）添加CSS样式，确保它的层级高于粒子画布：

/* 替换成你实际的内容容器类名，比如Divi的.et_pb_section或者自定义类 */
.your-content-wrapper {
  position: relative;
  z-index: 10;
}

同时检查粒子画布的CSS，确认它的z-index低于内容：

canvas.pg-canvas {
  z-index: 1;
}

2. 容器被强制设置为overflow: hidden #

Particleground初始化时，可能会给它的父容器添加overflow: hidden属性，这会导致容器内的内容无法滚动。

解决办法：
找到粒子背景的父容器，手动覆盖overflow属性：

/* 替换成你的粒子容器类名 */
.pg-container {
  overflow: auto !important;
}

如果是全屏背景，你可能需要把粒子容器设置为position: fixed，然后让内容容器独立滚动，避免全局overflow被锁死。

3. JS事件阻止了默认行为 #

有些粒子库会在鼠标事件（比如mousemove、click）中调用e.preventDefault()，这会意外禁用文本选中、链接跳转这些浏览器默认行为。

解决办法：

• 查看Particleground的初始化配置，有没有可以关闭默认事件阻止的选项（比如部分版本有preventDefault: false参数）；
• 如果没有配置项，直接修改库的源码：找到绑定事件的地方（比如onMouseMove函数），删除e.preventDefault()这一行；
• 或者用事件委托在内容区域重新绑定事件，恢复默认行为：

document.querySelector('.your-content-wrapper').addEventListener('click', function(e) {
  e.stopPropagation();
}, true);

4. Divi主题的布局冲突 #

Divi的模块本身带有复杂的定位和样式，可能和粒子背景的容器布局产生冲突。比如Divi的模块默认是position: static，导致z-index不生效。

解决办法：
在Divi编辑器中给需要交互的模块添加自定义CSS类，然后设置position: relative和合适的z-index，确保模块能“浮”在粒子背景上方。

排查小技巧 #

用浏览器开发者工具（F12）右键点击无法交互的区域，选择“检查”：

• 查看Elements面板，确认内容元素是否被canvas覆盖；
• 在Styles面板检查overflow、position、z-index属性；
• 在Event Listeners面板查看是否有阻止默认行为的事件绑定。

内容的提问来源于stack exchange，提问作者Tarik Druskic