React项目集成react-particles-js时锚点失效的解决方法

根本成因 #

• 失效和设置的330vh粒子高度没有直接关系，问题出在CSS层叠与事件拦截逻辑上：
  1. 粒子层容器设置了绝对定位，但没有指定z-index层级。按照CSS渲染规则，定位元素默认会覆盖在普通文档流元素上方，代码里虽然把粒子层写在Home内容前面，但绝对定位的粒子层实际渲染时是压在Home整个内容区域上面的。
  2. 粒子层内部的canvas元素会捕获自身范围内的所有鼠标、触摸事件，不会把事件向下传递，因此所有被粒子层覆盖的可交互元素（链接、按钮等）都会完全收不到点击信号，锚点自然就没有跳转响应。

落地修复方案 #

• 给粒子层容器补充两个核心样式，从根源上解除它的交互拦截能力：
  将原来粒子容器的内联样式从{ position: "absolute" }替换为：

  <div style={{
    position: "absolute",
    top: 0,
    left: 0,
    zIndex: -1,
    pointerEvents: "none"
  }}>
    <Particles params={particlesConfig} />
  </div>
  

  两个样式的作用：
  • pointerEvents: "none"：强制粒子层完全不响应任何鼠标、触摸操作，所有点击会直接穿透该层，落到下层的真实交互元素上，无论粒子层的铺展范围多大，都不会阻挡用户操作
  • zIndex: -1：把粒子层压到文档流的最底层，从层叠顺序上彻底避免它遮挡上层的页面内容
• 移除写死的330vh粒子尺寸配置：原本写死超长高度是为了让粒子背景跟着页面滚动长度铺满，改造后粒子层会自动撑满父级App容器的实际高度——App本身是相对定位，高度会被内部的Home内容自动撑开，完全不需要手动设置超长尺寸，还能减少不必要的canvas渲染性能消耗。
• 如果出现粒子层透出的颜色影响文字可读性的情况，只需要给Home容器加一层半透明衬底背景即可，不需要额外调整层级。

内容的提问来源于stack exchange，提问作者Ivan Rubio