CodeMirror.禁用垂直滚动条

Question

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

有人可以帮忙吗？

Answer 1

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

从文档:

scrollbarStyle:string

选择滚动条实现.默认为"native",显示本机滚动条.核心库还提供"null"样式,完全隐藏滚动条.插件可以实现其他滚动条模型.

结合这个:

• 自动高度:height: auto&viewportMargin: Infinity(例如:http://codemirror.net/demo/resize.html)
• 包装线: lineWrapping: true

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

Answer 2

该CodeMirror DOCO大约风格会谈CodeMirror滚动控制是否显示滚动条和textarea的是扩展以适应内容.具体来说它说:

CodeMirror-scroll 编辑器是否滚动(溢出:自动+固定高度).默认情况下,确实如此.将CodeMirror类设置为height:auto并赋予此类overflow-x:auto; 溢出y:隐藏; 将导致编辑器调整大小以适应其内容.

因此,我们的想法是为您自己的CSS添加如下内容:

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

如图所示这里在随风格上的文档的官方演示CodeMirror滚动.

什么对我有用:

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

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

CodeMirror 3:

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