0

我正在使用highcharts 库，它是相关的插件，并使用完美的滚动条进行滚动。该图表使用“缩小”和“放大”（鼠标滚轮事件）插件进行扩展，并放置在父DIV元素下（在其上实现了完美的滚动条）。

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

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

上述场景已在以下 jsfiddle 中实现，适用于Chrome browser：https ://jsfiddle.net/delux123/4kh5zbxv/68/

但问题是这行不通Mozilla Firefox browser。在那里，当用户鼠标在图表上方时，图表不会“缩小”/“放大”；

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

编辑：

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

4

1 回答 1

1

计算的问题delta总是-1在Firefox

相反，您可以deltaY直接从事件中使用

let delta = e.deltaY;

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

不使用完美滚动条

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

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

于 2019-12-19T12:41:43.630 回答