如何在Electron与Svelte中实现无边框窗口的拖动功能？

嘿，我刚好踩过这个坑！你现在的核心问题是CSS前缀写错了——你把-webkit-app-region和-webkit-user-select写成了--webkit-（两个短横），这是CSS变量的写法，而非WebKit内核识别厂商前缀的正确格式，所以你的拖动样式根本没生效。

咱们一步步来修正：

1. 修正CSS前缀错误 #

把Svelte代码里的--webkit-改成-webkit-（单个短横），这是WebKit内核识别拖动属性的标准写法。修正后的完整代码如下：

<main>
  <h1>Hello</h1>
</main>

<style>
main {
  /* 重点：修正前缀为单个短横 */
  -webkit-user-select: none;
  -webkit-app-region: drag;
  text-align: center;
  padding: 1em;
  max-width: 240px;
  margin: 0 auto;
}

h1 {
  color: #ff3e00;
  text-transform: uppercase;
  font-size: 4em;
  font-weight: 100;
}

@media (min-width: 640px) {
  main {
    max-width: none;
  }
}
</style>

2. 额外注意事项 #

如果之后还是有问题，可以检查这几点：

• 确保主进程的BrowserWindow确实设置了frame: false（你已经确认生效，这条可跳过）
• 如果拖动区域内有可交互元素（比如按钮、输入框），要给这些元素单独设置-webkit-app-region: no-drag，否则点击它们时会触发窗口拖动，影响正常交互：

  <button style="-webkit-app-region: no-drag;">我是可点击按钮</button>
  

• 部分Electron版本可能需要配合titleBarStyle: 'hidden'使用，你可以在主进程的窗口配置里加上试试：

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,
    titleBarStyle: 'hidden', // 可选，针对部分Electron版本优化
    webPreferences: {
      // 根据你的项目需求配置，比如contextIsolation等
    }
  });
  

改完前缀之后，你应该就能正常拖动窗口了～

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