Editing an editor's scrolling

1

Hello, I’m trying to change an editor’s scroll in two ways:

  • I’ve got the editor inside a large body. I want to scroll freely through the body with regular scrolling (i.e., mouse wheel or two finger scrolling in Macbook) and even when the cursor is inside the editor I want to keep scrolling the body and not scroll the editor. I never want to scroll the editor with regular scrolling

  • I want to scroll the editor using drag scrolling

I think I’m able to implement both of these things but I can’t seem to understand which div or class the editor scrolling belongs to? Could you give me some pointers on how I should go about to implementing this? I’ve tried preventing scrolling in CodeMirror-sizer, CodeMirror-scroll and CodeMirror classes but it didn’t seem to work.

Thanks

2

I found this cm.getScrollerElement() → Element in the docs. I guess that’s it?

3

Could you please give me any hints on why this still allows scrolling?

$('.CodeMirror-scroll').on('scroll mousewheel touchmove', function(event) {
      event.preventDefault();
      //event.stopPropagation();
});
4

Because the editor is handling the event. But even if it weren’t, calling preventDefault will prevent the wheel from scrolling the page as well, so that won’t help. I don’t think browsers make it possible to scroll a given element with one method but not with another – it’s either scrollable, or it isn’t.

5

Sorry to bother you again, I’m kind of stuck with this feature in my project. Could you then point me to how manipulate the scroll event through CodeMirror’s handler?

Isn’t there a way to use event.stopPropagation() to prevent the scroll event to go up to the elements and then use event.preventDefault() alongside the mouse button to make it behave like a drag scroll?

Thanks!

6

@marijn I see there’s "scroll" (instance: CodeMirror) but unlike most other events this one does not provide the event as a parameter. Why is this? Is there a way to fetch the event and use it in the event handling function?

7

What did you want to do with this event? Scroll events can’t be canceled, and don’t really carry information.

8

Hello @marijn, thank your for keeping up with my problem. Here’s a SO post I made which should explain what I’m trying to achieve: http://stackoverflow.com/questions/42683312/how-to-manipulate-scroll-event-in-codemirror