禁用代码镜像元素上的滚动

Question

我试图在代码镜像组件上实现类似的效果，该组件将通过执行溢出操作实现:隐藏在div上。

在实践中，这意味着：

• 无可见滚动条
• 当“滚动操作”在编辑器上发生时，网站主体自身移动(即不可能相对于网站滚动编辑器)

我怎么能这么做？

附注：

一个简单的“溢出:隐藏”无法工作，因为它看起来像是CodeMirror为垂直滚动条和水平滚动条创建了一个单独的div。我的猜测是javascript用于处理实际的滚动行为。我需要javascript来恢复这个吗？

P.S.S.

我正在使用react-codemirror2，但是我希望找到一个通用的答案，并且很高兴地找到如何在react中执行它。

Answer 1

更新答复

CSS，其中.editor是包装文本区域的div。

.editor .CodeMirror-scroll {
    overflow: hidden !important;
}

/* hide the scrollbars */
.editor .CodeMirror-vscrollbar, .editor .CodeMirror-hscrollbar {
    display: none !important;
}

JS，其中editor是codemirror实例

// does not allow focus within codemirror editor:
editor.setOption('readOnly', 'nocursor');

然后，如果需要，可以由另一个编辑器设置您的scrollTop()位置。

问题：

• 无法从编辑器中复制。
• 在选择内容时，上下移动鼠标将导致滚动。~将寻找修复此问题的方法。

Answer 2

设置scrollbarStyle: null，它完全隐藏滚动

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      scrollbarStyle: null
    });

Answer 3

我还使用了react codemirror2 2，它接受className支持，防止滚动可以通过css轻松完成。您应该在max-height中添加height: auto。

 <CodeMirror
   ...
   className={isScrollable ? 'disable-scroll' : ''}
 />

// sample css
 .disable-scroll .CodeMirror {
   max-height: 10rem;
   height: auto;
 }