使无框架React / Electron应用标题栏在滚动过程中不会消失

Question

我有一个带有文本编辑器和标题栏的基本应用程序。我不希望滚动条出现在侧面，除非文本编辑器进入溢出状态。即使那样，我也不希望标题栏在滚动过程中消失。现在，确实如此。

我认为这里缺少一些CSS巫术，或者我做错了事。

使用React，JS和Electron。如果重要的话，文本编辑器为Quill.js。已使用create-react-app。

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;

我的意思的屏幕截图：

当我向下滚动时，文本会停留在那里，但是颜色会滚动：

Answer 1

尝试添加此内容，

body{
margin-bottom:30px;
}