将 Highcharts 与 PerfectScrollbar 结合使用时，鼠标滚轮事件在 Firefox 中无法正常工作
Mouse wheel event, not working as expected in Firefox, when using Highcharts with PerfectScrollbar
我正在使用 highcharts library, it's related plugins and using the perfect scrollbar 进行滚动。该图表使用 "zooming out" 和 "zooming in"（在鼠标滚轮事件上）的插件进行扩展，并放置在父 DIV 元素下（在其上实现了完美的滚动条）。
请注意，它应该是这样工作的：
- 当用户鼠标悬停在图表上并且用户滚动鼠标滚轮时，图表为 "zoomed out" / "zoomed in"（应用来自 highchart 插件的事件）；
- 如果用户没有用鼠标悬停图表并且正在滚动鼠标滚轮，则父级 DIV 向下滚动；
上述场景已经在以下 jsfiddle 中实现，并且适用于 Chrome browser：https://jsfiddle.net/delux123/4kh5zbxv/68/
但问题是这不适用于 Mozilla Firefox browser。在那里，当用户鼠标位于图表上方时，图表不是 "zooming out" / "zooming in"；
我无法检测到这两个库中的哪一个导致了问题，但鼠标滚轮事件以某种方式包含在问题中。我在这里尝试了很多组合，但无法使其在两种浏览器中都按预期工作。
编辑：
下面是基于 @User863 答案的解决方案：
https://jsfiddle.net/delux123/4kh5zbxv/73/
问题是 delta 在 Firefox
中计算的总是 -1
相反，您可以直接从 event
使用 deltaY
let delta = e.deltaY;
https://jsfiddle.net/aswinkumar863/085nvLad/
不使用perfectScrollbar
从版本 64 开始，firefox 具有 scrollbar-width、scrollbar-color 属性。所以你也可以设计滚动条
我正在使用 highcharts library, it's related plugins and using the perfect scrollbar 进行滚动。该图表使用 "zooming out" 和 "zooming in"（在鼠标滚轮事件上）的插件进行扩展，并放置在父 DIV 元素下（在其上实现了完美的滚动条）。
请注意，它应该是这样工作的：
- 当用户鼠标悬停在图表上并且用户滚动鼠标滚轮时，图表为 "zoomed out" / "zoomed in"（应用来自 highchart 插件的事件）；
- 如果用户没有用鼠标悬停图表并且正在滚动鼠标滚轮，则父级 DIV 向下滚动；
上述场景已经在以下 jsfiddle 中实现，并且适用于 Chrome browser：https://jsfiddle.net/delux123/4kh5zbxv/68/
但问题是这不适用于 Mozilla Firefox browser。在那里，当用户鼠标位于图表上方时，图表不是 "zooming out" / "zooming in"；
我无法检测到这两个库中的哪一个导致了问题，但鼠标滚轮事件以某种方式包含在问题中。我在这里尝试了很多组合，但无法使其在两种浏览器中都按预期工作。
编辑：
下面是基于 @User863 答案的解决方案： https://jsfiddle.net/delux123/4kh5zbxv/73/
问题是 delta 在 Firefox
-1
相反，您可以直接从 event
使用deltaY
let delta = e.deltaY;
https://jsfiddle.net/aswinkumar863/085nvLad/
不使用perfectScrollbar
从版本 64 开始，firefox 具有 scrollbar-width、scrollbar-color 属性。所以你也可以设计滚动条