CodeMirror 沒有完全向下滾動，Cursor 隱藏在 div 后面

Question

我想在瀏覽器窗口中以全屏模式使用非常出色的文本編輯器CodeMirror ，並且我想為某種菜單添加一個固定的標題 - 或者至少為具有某些功能的幾個按鈕添加空間。

所以我在頂部添加了一個帶有“位置：固定”的 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（非重疊），樣式為“位置：絕對”。 它們不重疊，所以滾動很好。

<!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 個解決方案

解決方案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