CodeMirror 没有完全向下滚动，光标隐藏在 div 后面

Question

我想在浏览器中以全屏模式使用非常优秀的文本编辑器 CodeMirror window 并且我想添加一个固定的 header某种菜单 - 或者至少 space 一些具有某些功能的按钮。

所以我在顶部添加了一个 div 和 "position: fixed"，并在 div 和代码镜像 object 中添加了一个 padding-top。问题出现了，当有足够的文本发生滚动时。将光标 down/scrolling 内容向上移动并再次向上移动光标后，光标移到 div 后面，但内容没有完全向下滚动。光标被隐藏，我看不到内容。只有通过滚动条滚动才有效。

我是否需要将 html/css 更改为固定的 div？或者我是否需要检查光标是否来自 behind/under 和 div 并且我必须让 CodeMirror 手动滚动？我试过了，但没能以编程方式完成:-(

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css">
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
    <script src=http://codemirror.net/lib/codemirror.js></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
  <div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
    <button>Some action</button>
  </div>
  <div style="padding-top: 23px">
    <textarea id=content name="content"></textarea>
  </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/x-httpd-php',
        lineNumbers: true
      });
    </script>
  </body>
</html>

也可以在这里查看：http://jsfiddle.net/fxvef3bw/1/

Answer 1

我自己找到了解决方案。

我使用两个 div（非重叠），而不是两个重叠的 div，样式为“position: absolute”。它们不重叠，所以滚动没问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel=stylesheet href="http://codemirror.net/doc/docs.css">
    <link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
    <script src=http://codemirror.net/lib/codemirror.js></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
    <style type=text/css>
        .CodeMirror {float: left; width: 100%; height: 100%; }
    </style>  
</head>
<body>
    <div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
        <button>some action</button>
    </div>
    <div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
        <textarea id="content" name="content" style="display: none;"></textarea>
    </div>
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        mode: 'application/x-httpd-php',
        lineNumbers: true
      });
    </script>
  </body>
</html>

更新的 jsfiddle 在这里：http://jsfiddle.net/fxvef3bw/2/

我希望我能得到一些关于绝对位置可能的副作用或缺点的评论。否则对我来说似乎没问题。

CodeMirror 没有完全向下滚动，光标隐藏在 div 后面

CodeMirror doesn't scroll down completely, Cursor is hidden behind div

html

javascript

css

codemirror