javascript - 将 Highcharts 与 PerfectScrollbar 结合使用时，鼠标滚轮事件在 Firefox 中无法按预期工作

Question

我正在使用highcharts library ，是related plugins并使用 perfect scrollbar用于滚动。该图表使用“缩小”和“放大”插件(在鼠标滚轮事件上)进行了扩展，并将其放置在父 DIV 元素下(在其上实现了完美的滚动条)。

请注意，它应该是这样工作的:

• 当用户鼠标悬停在图表上并且用户滚动鼠标滚轮时，图表会“缩小”/“放大”(应用来自 highchart 插件的事件)；
• 如果用户没有将鼠标悬停在图表上并且滚动鼠标滚轮，则父 DIV 向下滚动；

上述场景已在以下 jsfiddle 中实现，并且适用于 Chrome 浏览器:https://jsfiddle.net/delux123/4kh5zbxv/68/

但问题是这不适用于 Mozilla Firefox 浏览器。在那里，当用户鼠标位于图表上方时，图表不会“缩小”/“放大”；

我无法检测到这两个库中的哪一个导致了问题，但鼠标滚轮事件以某种方式包含在问题中。我在这里尝试了多种组合，但无法使其在两种浏览器中按预期工作。

编辑:

这是基于下面的@User863答案的解决方案: https://jsfiddle.net/delux123/4kh5zbxv/73/

Answer 1

问题是 delta 在 Firefox 中计算出来的始终是 -1

相反，您可以直接从 event 使用 deltaY

let delta = e.deltaY;

https://jsfiddle.net/aswinkumar863/085nvLad/

不使用 PerfectScrollbar

从版本 64 开始，Firefox 具有 scrollbar-width、scrollbar-color 属性。所以你也可以设置滚动条的样式

https://jsfiddle.net/aswinkumar863/nf4y3qeh/