1

我试图在代码镜像组件上实现类似的效果，这可以通过溢出来实现：隐藏在 div 上。

在实践中，这意味着：

  • 没有可见的滚动条
  • 当编辑器上发生“滚动动作”时，网站主体会自行移动（即，无法相对于网站滚动编辑器）

我怎么能那样做？

附言

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

PSS

我正在使用react-codemirror2，但正在寻找一个通用的答案，并且很高兴弄清楚如何在 react 中执行它。

4

3 回答 3

1

更新的答案

CSS，.editor包装 textarea 的 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()如果需要，您可以由其他编辑设置您的位置。

问题：

  • 无法从编辑器复制。
  • 选择内容时，上下移动鼠标会导致滚动。〜要寻找解决这个问题。
于 2019-09-30T18:42:19.503 回答
0

设置 scrollbarStyle: null 完全隐藏滚动

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
      lineNumbers: true,
      scrollbarStyle: null
    });
于 2021-10-15T07:24:55.387 回答
0

我也在使用 react-codemirror2，它接受className道具并防止滚动可以通过 css 轻松完成。你应该max-height加上height: auto.

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

// sample css
 .disable-scroll .CodeMirror {
   max-height: 10rem;
   height: auto;
 }
于 2021-12-07T05:51:27.813 回答