Electron自定义标题栏-webkit-app-region: drag仅部分可拖拽求助

云上老周

2026-7-9

Electron自定义标题栏拖拽范围异常解决办法

问题原因：标题栏右侧的按钮属于可交互元素，会默认阻断父元素的-webkit-app-region: drag拖拽行为，导致按钮所在区域无法拖拽。另外需确认Tailwind自定义类是否正确生效。

解决步骤

1. 确认Tailwind自定义工具类配置

在tailwind.config.js中添加对应的拖拽工具类，确保app-region-drag和app-region-no-drag能正确生成CSS样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他配置项
  theme: {
    extend: {},
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.app-region-drag': {
          '-webkit-app-region': 'drag',
        },
        '.app-region-no-drag': {
          '-webkit-app-region': 'no-drag',
        },
      })
    }
  ],
}

2. 给按钮添加禁止拖拽类

给所有可交互的按钮组件添加app-region-no-drag类，既保证按钮的点击功能正常，又不会阻断标题栏的拖拽行为。同时修正:user-select-none为Tailwind标准类select-none：

修改后的代码：

<div className="flex justify-between items-center h-8 p-0 fixed top-0 left-0 w-screen max-w-screen bg-gray-100 select-none app-region-drag">
  <div className="flex items-center gap-2 h-full w-full pl-2">
    <img src={favicon} className="w-5 h-5" alt="app-logo" />
    <h1>App Name</h1>
  </div>
  <div className="flex items-center h-full">
    {maximized ? (
      <ContractButton onClick={handleMaximizeToggle} className="app-region-no-drag" />
    ) : (
      <MaximizeButton onClick={handleMaximizeToggle} className="app-region-no-drag" />
    )}
    <MinimizeButton onClick={app.minimize} className="app-region-no-drag" />
    <CloseButton onClick={app.quit} className="app-region-no-drag" />
  </div>
</div>