d3 - 使用鼠标滚轮缩放时禁用滚动？

Question

我正在使用画笔和缩放折线图块中的代码。

不过，我注意到，如果图形完全缩小（就像最初查看图形时一样），并且我将鼠标光标放在图形上并向下旋转鼠标滚轮（通常会缩小），则它向下滚动浏览器窗口。

d3 中有没有一种方法基本上可以说，“只要鼠标位于 SVG 上，滚轮滚动就不应该滚动浏览器窗口？”

Answer 1

您可以尝试在 svg 上将 overscroll-behavior 设置为“none”。 Chrome/Edge/Firefox 支持它，但不幸的是 Safari 不支持。

Answer 2

我已经这样解决了这个问题：

第一个解决方案（不错） 综上所述，我们无法禁用主滚动条的滚动。但是我们可以向可以放大/缩小的 div 添加溢出，并通过将高度和宽度更改为 0 来隐藏滚动。

.zoom-works {
   overflow: auto;
   &::-webkit-scrollbar {
      width: 0;
      height: 0;
   }
}

第二个解决方案（好）

只要

preventDefault

就可以解决问题。我是一名 Angular 开发人员，已经解决了这个问题（你不需要任何 HTML/CSS 技巧）：

@HostListener('mousewheel', ['$event']) onMousewheel(event) {
    event.preventDefault();
    ...
}