Electron粘性Navbar拖动异常：滚动后无法拖动问题求助

安全阿岳

2026-7-13

问题根源

滚动后粘性定位的Navbar虽视觉上处于顶部，但DOM层级或事件捕获优先级被下方Card组件抢占，导致Electron的窗口拖动事件（-webkit-app-region: drag）无法被Navbar正常捕获。

具体解决步骤

强制Navbar层级置顶
给Navbar设置足够高的z-index，确保滚动后始终覆盖其他组件，用Tailwind的z-[9999]（或自定义更大值）即可：
```
<nav className="sticky top-0 z-[9999] bg-white shadow-md">
```

确保Navbar优先捕获事件
给Navbar配置pointer-events: auto以强制接收点击事件，同时正确设置Electron拖动属性，注意内部可交互元素需排除拖动功能：

<nav 
  className="sticky top-0 z-[9999] bg-white shadow-md"
  style={{
    WebkitAppRegion: 'drag',
    pointerEvents: 'auto'
  }}
>
  <div className="container mx-auto px-4 py-3">
    <h1 className="text-xl font-bold">App Title</h1>
    {/* 按钮等可交互元素必须加no-drag，避免拖动时误触发点击 */}
    <button 
      className="ml-auto"
      style={{ WebkitAppRegion: 'no-drag' }}
    >
      关闭
    </button>
  </div>
</nav>

检查Card组件层级
确认Card组件的z-index未超过Navbar，若有冲突则将Card的z-index调整为更低值（比如默认的z-0或z-10）。
优化渲染层级（可选）
若滚动后问题仍存在，给Navbar添加will-change: transform，帮助浏览器正确处理粘性定位的渲染上下文：
```
style={{
  WebkitAppRegion: 'drag',
  pointerEvents: 'auto',
  willChange: 'transform'
}}
```