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

【问题标题】：Disabling scrolling on Code Mirror element禁用代码镜像元素上的滚动
【发布时间】：2020-01-21 08:54:30
【问题描述】：

我正在尝试在 Code Mirror 组件上实现类似的效果，这将通过执行 overflow: hidden on a div 来实现。

实际上这意味着：

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

我该怎么做？

附言

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

附言

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

【问题讨论】：

这可能会有所帮助codepen.io/Souleste/pen/wvvwJWw

标签： scroll codemirror react-codemirror

【解决方案1】：

更新答案

CSS，其中.editor 是包裹文本区域的div：

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

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

JS，其中editor 是您的代码镜像实例：

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

如果需要，您可以通过其他编辑器设置您的scrollTop() 位置。

问题：

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

【讨论】：

是的，我希望完全禁用/冻结滚动。我可以使用 Code Mirror API 隐藏滚动条。
不幸的是，这对我不起作用，即使使用此规则，我仍然可以在悬停编辑器时使用触摸栏滚动。 CodeMirror 编辑器滚动是通过 javascript 控制的，这就是为什么这可能不起作用。

【解决方案2】：

设置滚动条样式：null，完全隐藏滚动

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

【讨论】：

【解决方案3】：

我也在使用 react-codemirror2，它接受 className 属性并且可以通过 css 轻松完成防止滚动。您应该添加max-height 和height: auto。

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

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

【讨论】：