How to disable virtual scroll in code mirror

1

I am currently using @uiw/react-codemirror to implement key selection functionality in my project. Upon inspecting the elements in the browser’s developer tools, I noticed that virtual scrolling is enabled, which leads to DOM manipulations during user scrolls. Specifically, some div elements are being removed and new ones are added dynamically.

While I understand and appreciate the efficiency that virtual scrolling offers, I would like to know if there is a way to disable this feature. My requirement is to maintain the scroll functionality without the DOM manipulations. Ideally, once the ReactCodeMirror component loads, all the div elements should be rendered at once without any further modifications during scrolling.

Version Details
@uiw/react-codemirror: ^4.22.1

Also, I have noticed that @uiw/react-codemirror under the hood uses the CodeMirror package, if anyone have any idea about this can you please help me out in this

Is there any prop, which I can pass to disable the virtual scroll ?

1 Like
2

There isn’t. (And there won’t be. The performance would be terrible on larger documents.)

1 Like
3

Ok I understand the purpose behind keeping the virtual scroll. However, I would like to suggest an enhancement for handling smaller documents. It would be advantageous to offer an option (like passing some props) to disable virtual scrolling and render the entire document at once. We can include a warning that this might affect performance for larger documents, thereby ensuring users are aware of the potential impact. This approach allows users to make an informed decision when choosing to enable this option.