CodeMirror。禁用垂直滚动条

Question

我目前正在使用CodeMirror在浏览器的文本区域中编辑CODE。如果我有超过20行代码，它会向右添加一个垂直滚动条。但我不需要这个滚动条。相反，我需要编辑器大小垂直增长。

有人可以帮忙吗？

Answer 1

在CodeMirror 3中，有一个禁用滚动条的选项：scrollbarStyle: "null"

来自文档：

  

scrollbarStyle：string

     

选择滚动条实现。默认为＆＃34; native＆＃34;，显示原生滚动条。核心库还提供了＆＃34; null＆＃34;风格，完全隐藏滚动条。插件可以实现其他滚动条模型。

将此与：

结合使用

• 自动高度：height: auto＆amp; viewportMargin: Infinity（例如：http://codemirror.net/demo/resize.html）
• 包装线：lineWrapping: true

然后控制父div的高度/宽度效果很好

Answer 2

CodeMirror doco讨论了一种样式 CodeMirror-scroll ，它控制是否显示滚动条，以及textarea是否展开以适合内容。具体来说它说：

  

<强> CodeMirror滚动   编辑器是否滚动（溢出：自动+固定高度）。默认情况下，确实如此。将CodeMirror类设置为height：auto并赋予此类overflow-x：auto;溢出y：隐藏;将导致编辑器调整大小以适应其内容。

因此，我们的想法是将自己的CSS添加到：

.CodeMirror {
  border: 1px solid #eee;
  height: auto;
}
.CodeMirror-scroll {
  overflow-y: hidden;
  overflow-x: auto;
}

如官方演示中的here所示，伴随着 CodeMirror-scroll 样式的文档。

对我有用的是什么：

对于使用CodeMirror 2.34的个人情况，我所做的就是将以下样式添加到我自己的样式表中：

div.CodeMirror-scroll { height: auto!important; overflow: visible; }

CodeMirror 3：

在我对CodeMirror 3的简短初步测试中，上述两种技术都不起作用，我仍然得到了滚动条。有意思，因为你认为关于主题的官方doco是有效的 - 除非CodeMirror 3改变了它的风格并且doco还没有赶上......

Answer 3

对于我来说，使用display:flex将codemirror textarea包裹在一个元素上，解决了不必要的水平滚动问题：

<div style='display: flex'>
  <textarea></textarea>
</div>
<script>
//codemirror setup
</script>