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

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.

Zymotic

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);
    };
}

Marxist

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/

Oid