Question

我想在浏览器窗口中以全屏模式使用非常优秀的texteditor CodeMirror ，我想为某种菜单添加固定标题 - 或者至少为几个按钮添加空间有一些功能。

所以我在顶部添加了一个“position：fixed”的div，并使用codemirror对象为div添加了一个padding-top。当有足够的文字表示滚动发生时，会出现问题。向下移动光标/向上滚动内容并再次向上移动光标后，光标将在div后面，但内容不会完全向下滚动。光标是隐藏的，我看不到内容。只能通过滚动条滚动。

我是否需要使用固定的div更改html / css？或者我需要检查光标是否位于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不会完全向下滚动，Cursor隐藏在div后面

1 个答案: