How do I prevent scrolling?

[taylorgoolsby]

"monaco-editor": "^0.15.1", via the react-monaco-editor package.
**Browser: Version 71.0.3578.80 (Official Build) (64-bit)
**OS: macOS 10.14.1 (18B75)

It appears that there is no way to prevent scrolling. For regular HTML elements, I can prevent scrolling by calling e.preventDefault() anywhere. I'm guessing scrolling is handled by the browser if the top-level document or window receives a wheel event which is not defaultPrevented.

I am building a UI where ctrl + wheel is interpreted as a zoom and it is used to scale the entire application.

The problem is when my mouse is over the monaco editor, and I do ctrl + wheel, I want to use e.preventDefault() to prevent the editor from scrolling just how it would prevent scroll if it was a regular HTML element.

Is there anyway I can prevent scrolling? Is this intended or is it a bug that e.preventDefault() doesn't prevent scrolling like it does with HTML elements?

Here is a code example

I expect scrolling to to be prevented with this code:

<div
  onWheel={(e) => {
    e.preventDefault()
  }}
>
  <MonacoEditor
    width={300}
    height={300}
    language="markdown"
  />
</div>

[alexdima]

@taylorgoolsby Perhaps you can capture the event before the bubbling phase and stop propagation? (e.stopPropagation()) In simple DOM API that would be the third argument, true: domNode.addEventListener('wheel', () => {...}, true). That would make it that you get the event before it is sent to its target.

[taylorgoolsby]

@alexandrudima It's been a while since I've posted, and since then I switched to different IDE besides monaco. I remember trying out stopping on the capture phase, but it didn't work. When I get the time, I'll checkout the old commits and try it again.

[geyang]

@taylorgoolsby it is not an IDE, it is an editor :)