🐛 [BUG]: Canvas captures scroll even when all scroll-related features are disabled

[snoozbuster]

Is there an existing issue for this?

• I have searched the existing issues and this is a new bug.

Current Behavior

When all scroll behaviors are disabled (pinchToZoom, scrollToZoom, scrollToPan), and a canvas is inserted in a scrolling document, scrolling the page such that the pointer enters the canvas boundaries will immediately halt the scroll

Expected Behavior

Scrolling should not be halted if the scroll event is not used by vue-flow to perform some action

Steps To Reproduce

1. Disable all scroll-related functionality
2. Scroll the mouse over the canvas

Relevant log output

No response

Anything else?

My thought is that this code should probably only run and "trap" the event if the handler detects that some action should be performed based on the event and current settings. As it stands this issue can be worked around somewhat by adding nowheel to the entire canvas, but this only works if it's desired that all events are disabled. if the settings are adjusted so that scroll-to-zoom only happens on cmd/ctrl press, then it's not possible to prevent this issue with nowheel.

[bcakmakoglu]

Are you possibly just looking for the preventScrolling prop?

[snoozbuster]

could be. I wasn't aware of that prop, is it recent? Let me try it out.

[bcakmakoglu]

Not really, has existed for more than a year now but isn't really that well documented 😅

[snoozbuster]

@bcakmakoglu I don't believe that prop does what I'm looking for. in fact, it doesn't seem to have any effect whatsoever in my app. As a more concrete example, go to https://vueflow.dev/examples/ and add :zoom-on-scroll="false" then place the mouse outside the canvas (above or below it) and try to smoothly scroll the page. if you end a scroll with the mouse over the canvas, all further scrolls get eaten by the canvas even though they aren't used.

In my app, I have a rather thin + wide canvas which is inline on a longer page. so scrolling this page becomes pretty annoying because to a user it seems like their scroll wheel just stops working, since the canvas is stopping all scroll events regardless of whether or not it ends up using them to produce an effect.

[bcakmakoglu]

What you describe is exactly the use-case of preventScrolling. You need to set it to false in order for it to not stop scrolling the page when you hit the VueFlow container with a wheel.
It is what's preventing any zoom/pan on scroll when you open vueflow.dev (the top flow with the little buttons to go to different sections of the docs). Otherwise you'd be stuck scrolling in there ^^

[snoozbuster]

Ah I see. I was setting it to true. But this still doesn't do exactly what I want - it does allow the page to scroll without interference, but it can't be combined with :zoom-on-scroll="false" and zoom-activation-key-code="Ctrl" in order to have no scroll action by default, but still allow scroll-to-zoom with a modifier. That is what I really want. Is there a way to do that?

[bcakmakoglu]

You could track if the Ctrl key is pressed and toggle preventScrolling.

[snoozbuster]

I guess, but my point is why should I have to do that? why is the library calling preventDefault on events it doesn't use? preventDefault is intended for use cases where javascript is supplanting the original action with a new one, so surely that would be a better solution. I would have to duplicate quite a bit of the code inside the library relating to OS detection and key defaulting which is quite fragile.

[bcakmakoglu]

I see your point I'm just giving workarounds until it's fixed 😄

[snoozbuster]

ah ok 😄 I am ok with waiting for a fix, appreciate it!

[bcakmakoglu]

Sorry that this hasn't been fixed yet, I am still talking to the ReactFlow team whether this should be considered a bug or not and we're not 100% clear on this yet 😅

[snoozbuster]

Ah, I wondered what the hold up was. Is there some counter argument they have? Is the discussion public?

[bcakmakoglu]

Not a public discussion no, the hold up is that the devs haven't gotten back to me yet 😅
Pinged recently though I'll ask next week again ^^