如何禁用滚动功能？

Question

我对“双滚动”有疑问；这是我的应用程序的屏幕：

如您所见，添加表格的空间被滚动条包围。 我只需要滚动功能来放大和缩小图表，而不是上下移动它。目前的情况是，如果我运行放大和缩小图表的函数，它也会向上或向下滚动。这样的双卷轴毫无意义。

是否可以只关闭“滚动”功能而不关闭侧面的滚动条？

这是一些代码（我的事件轮）（我正在使用库“MindFusion Diagramming”）：

document.addEventListener('wheel', function (e) {
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
    //e.preventDefault();
});

当我取消注释 e.preventDefault () 时，这是一个错误

我的 div（内容是带有滚动条的区域）：

<div id="content" style="position: static; width: 1600px; height: 700px;"  >
        <!-- The Overview component is bound to the canvas element below -->
        <div style="position: absolute; right: 120px; width: 200px;
            height: 200px; border: 1px solid #ffffff; background-color: #c0c0c0;">
            <canvas id="overview" width="200" height="200">
            </canvas>
        </div>
    <!-- The Diagram component is bound to the canvas element below -->
    <div style="position: static; width: 100%; height: 100%; overflow: auto;">
        <canvas id="diagram" width="2100" height="2100">
            This page requires a browser that supports HTML 5 Canvas element.
        </canvas>
    </div>
</div>

Answer 1

试试，

document.addEventListener('wheel', function (e) {
    e.preventDefault();
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
}, { passive : false});

参考：what are passive event listeners

Answer 2

我假设您覆盖滚动事件以实现缩放功能。您需要在事件侦听器中获得的事件对象上调用 preventDefault 函数。

编辑： 您的事件侦听器是被动的，因为滚动事件侦听器通常会破坏用户体验。将其注册为非被动：

document.addEventListener('wheel', function (e) {
    var zoom = diagram.getZoomFactor();
    zoom -= e.deltaY / 35;
    if(zoom > 70 && zoom < 200 )
    {
        diagram.setZoomFactor(zoom);
    }
    e.preventDefault();
}, {passive: false});