Javascript 使无框React/Electron应用程序标题栏在滚动期间不消失

我有一个带有文本编辑器和标题栏的基本应用程序。我不希望滚动条出现在侧面，除非文本编辑器溢出。即使这样，我也不希望标题栏在卷轴中消失。现在是这样

我想我在这里错过了一些CSS巫术，或者我做错了什么

使用React、JS和Electron。如果这很重要的话，文本编辑器就是。已使用

创建反应应用程序

App.css：

.App {
    min-height: 100%;
    margin: 0;
    background-color: red;
}

.editor {
    background-color: rgb(29, 29, 29);
    color: rgb(201, 201, 201);
    min-width: 100%;
    height: 100%;
    position: absolute;
    margin-top: 30px;
}

.app-bar {
    -webkit-app-region: drag;
    min-width: 100%;
    background-color: green;
    position: fixed;
    height: 30px;
}

App.js：

import React, { Component } from 'react'
import ReactQuill from 'react-quill';

import './App.css';
import 'react-quill/dist/quill.bubble.css';

export class App extends Component {

  constructor() {
    super();
  }

  render() {
    return (
      <div className="App">
        <div className="app-bar">
          test
        </div>
        <div>
          <ReactQuill theme="bubble" className="editor" />
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”
从“react quill”导入react quill；
导入“/App.css”；
导入'react quill/dist/quill.bubble.css'；
导出类应用程序扩展组件{
构造函数（）{
超级（）；
}
render（）{
返回(
测试
);
}
}
导出默认应用程序；

我的意思截图：

向下滚动时，文本保持不变，但颜色会滚动：

尝试添加此项

body{
margin-bottom:30px;
}

---

谢谢你的帮助！一个小的观察：虽然您的答案对于经验丰富的程序员来说可能非常明显，但是如果您添加一个关于为什么您的解决方案解决了这个问题的小解释，那就更好了。顺致敬意，嘿，尝试了一下，最后得到了一些奇怪的造型：