Disabling scrolling on Code Mirror element - scroll

Question

I’m trying to achieve a similar effect on a Code Mirror component that would be achieved by doing overflow: hidden on a div.
In practice this means:
No visible scroll bars
When “scroll action” takes place on the editor, the website body moves itself (i.e., impossible to scroll editor relative to the website)
How could I do that?
P.S.
A simple “overflow: hidden” didn’t work because it looks like CodeMirror creates a separate div for vertical scroll bar and horizontal scrollbar. My guess is that javascript is used to handle actual scrolling behavior. Do I need javascript to revert this?
P.S.S.
I'm using react-codemirror2, but looking for a general answer and happy to figure out how to execute it within react.

Answer 1

Updated Answer
CSS, where .editor is the div wrapping the textarea:
.editor .CodeMirror-scroll {
overflow: hidden !important;
}
/* hide the scrollbars */
.editor .CodeMirror-vscrollbar, .editor .CodeMirror-hscrollbar {
display: none !important;
}
JS, where editor is your codemirror instance:
// does not allow focus within codemirror editor:
editor.setOption('readOnly', 'nocursor');
Then you can set your scrollTop() position by another editor if need be.
Issues:
cannot copy from the editor.
when selecting content, moving the mouse up and down will cause scroll. ~ going to look for a fix for this.

Answer 2

Set scrollbarStyle: null which Completely hides the scroll
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
scrollbarStyle: null
});

Answer 3

I'm also using react-codemirror2, it accepts className prop and preventing scroll can be done via css easily. You should add max-height with height: auto.
<CodeMirror
...
className={isScrollable ? 'disable-scroll' : ''}
/>
// sample css
.disable-scroll .CodeMirror {
max-height: 10rem;
height: auto;
}