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

Question

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

实际上是指：

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

我该怎么做？

P.S。

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

P.S.S。

我正在使用react-codemirror2，但正在寻找一个一般性的答案，并乐于弄清楚如何在react中执行它。

Answer 1

我不知道您是否要滚动disabled还是只想隐藏滚动条。

要禁用滚动：

/* this is what is actually being 'scrolled' */
.CodeMirror-scroll {
    overflow: hidden !important;
}

使用此键，您仍然可以使用箭头键在编辑器中上下移动，但是实际的scrolling被禁用。

---

要隐藏滚动条：

.CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
    opacity: 0;
    pointer-events: none;
}