Configure vis network diagrams to zoom only on pinch not on mouse scroll - vis.js

Question

I have a large network diagram created by vis.js which is 100% wide in the browser and very tall, thus requires scrolling down the page to see it all - I want my page to operate like most other web pages in the world - but vis.js zooms when I scroll, instead of scrolling the page. How do I turn off zooming for the scroll but still allow it for say, pinch (or hold a key + scroll)?
Sure I can switch off zooming with this option - and add some built in zoom buttons instead:
var options = {
interaction: {
zoomView: false,
navigationButtons: true,
}
};
but this is not ideal. It requires the user to scroll to the bottom of the page to access the zoom controls. Plus I want a more accessing zoom feature (yeah, I know, I just turned that more accessible zoom feature off). Vis timeline diagrams seem to have more methods re zooming than network diagrams.
To summarise: I want mousewheel/trackpad scroll to be disabled for the diagram thus giving a natural whole page scrolling behaviour, plus a pinch (or holding a key down + scroll) to zoom.

Answer 1

The pinch zooming function is handled in the onwheel listener and can be detected with the ctrlKey property. You can override the handler with your own, immediately returning if a pinch is not detected and otherwise performing as usual.
this.network = container ? new Network(container, data, options) : {};
const { interactionHandler } = this.network;
if (interactionHandler) {
interactionHandler.body.eventListeners.onMouseWheel = (event) => {
if (!event.ctrlKey) return; // ctrlKey detects a mac touchpad pinch in onwheel event
interactionHandler.onMouseWheel(event);
};
}

Answer 2

I don't think there's some vis-network specific solution. You have to detect mouse scroll and handle it accordingly, something like this:
container.addEventListener("wheel", function(e){
if (e.stopPropagation) e.stopPropagation();
return false;
})
For supporting old browsers, you should use DOMMouseScroll and mousewheel events.
Unfortunatelly, I don't have a mouse at hand so can't really test this for you, but here's a playground where you can do this yourself: https://jsfiddle.net/9m433scr/8/