5

我有一个由 vis.js 创建的大型网络图，它在浏览器中是 100% 宽并且非常高，因此需要向下滚动页面才能看到所有内容 - 我希望我的页面能够像世界上大多数其他网页一样运行 - 但是vis.js 在我滚动时缩放，而不是滚动页面。如何关闭滚动的缩放但仍然允许它说，捏（或按住键+滚动）？

当然，我可以使用此选项关闭缩放 - 并添加一些内置缩放按钮：

var options = {
  interaction: {
    zoomView: false,
    navigationButtons: true,
  }
};

但这并不理想。它要求用户滚动到页面底部才能访问缩放控件。另外，我想要一个更易于使用的缩放功能（是的，我知道，我刚刚关闭了更易于使用的缩放功能）。Vis时间线图似乎比网络图有更多的缩放方法。

总结一下：我希望为图表禁用鼠标滚轮/触控板滚动，从而提供自然的整个页面滚动行为，再加上捏合（或按住键+滚动）进行缩放。

4

2 回答 2

1

捏缩放功能在 onwheel 侦听器中处理，可以使用 ctrlKey 属性检测。您可以用自己的处理程序覆盖处理程序，如果未检测到夹点，则立即返回，否则照常执行。

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 max touchpad pinch in onwheel event
        interactionHandler.onMouseWheel(event);
    };
}
于 2020-04-16T19:59:11.893 回答
0

我不认为有一些特定于网络的解决方案。您必须检测鼠标滚动并相应地处理它，如下所示：

container.addEventListener("wheel", function(e){
    if (e.stopPropagation) e.stopPropagation();
    return false;
})

为了支持旧浏览器，您应该使用 DOMMouseScroll和mousewheel事件。

不幸的是，我手头没有鼠标，所以不能真正为你测试，但这里有一个游乐场，你可以自己做这个：https ://jsfiddle.net/9m433scr/8/

于 2018-03-16T07:40:13.420 回答