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

Question

I would like to use the very excellent texteditor CodeMirror in fullscreen mode in a browser window and I would like to add a fixed header for some kind of menu - or at least space for a few buttons with some functionality.我想在浏览器窗口中以全屏模式使用非常出色的文本编辑器CodeMirror ，并且我想为某种菜单添加一个固定的标题 - 或者至少为具有某些功能的几个按钮添加空间。

So I've added a div with "position: fixed" to the top and added a padding-top to the div with the codemirror object.所以我在顶部添加了一个带有“位置：固定”的 div，并使用 codemirror 对象向 div 添加了一个 padding-top。 The problem comes up, when there's enough text that scrolling happens.问题出现了，当有足够的文本滚动时。 After moving the cursor down/scrolling the content up and moving the cursor up again, the cursor goes behind the div but the content doesn't scroll fully down.向下移动光标/向上滚动内容并再次向上移动光标后，光标移到 div 后面，但内容不会完全向下滚动。 Cursor is hidden, I cannot see the content.光标被隐藏，我看不到内容。 Only scrolling via scrollbar works.只有通过滚动条滚动才有效。

Do I need to change the html/css with the fixed div?我是否需要使用固定的 div 更改 html/css？ Or do I need to check whether the cursor comes behind/under the div and I have to let CodeMirror scroll manually?或者我是否需要检查光标是否在 div 后面/下方，我必须让 CodeMirror 手动滚动？ I tried this but didn't manage to do it programmatically :-(我试过了，但没有设法以编程方式做到这一点:-(

<!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>

check out here as well: http://jsfiddle.net/fxvef3bw/1/也可以在这里查看： http : //jsfiddle.net/fxvef3bw/1/

Answer 1

I found a solution on my own.我自己找到了解决方案。

Instead of two overlapping divs, I use two divs (non-overlapping), with style " position: absolute ".我没有使用两个重叠的 div，而是使用两个 div（非重叠），样式为“位置：绝对”。 They don't overlap, so scrolling is fine.它们不重叠，所以滚动很好。

<!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>

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

I hope I can get some comments about possible side effects or drawbacks of the position absolute.我希望我能得到一些关于绝对位置可能的副作用或缺点的评论。 Otherwise it seems to be fine for me.否则对我来说似乎没问题。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-06-20 20:10:45

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-06-20 20:10:45

解决方案1
2 已采纳 2015-06-20 20:10:45