Search code examples
javascripthighchartsmouseeventmousewheelperfect-scrollbar

Mouse wheel event, not working as expected in Firefox, when using Highcharts with PerfectScrollbar

I'm using the highcharts library, it's related plugins and using the perfect scrollbar for scrolling. The chart is extended with plugin for "zooming out" and "zooming in" (on mouse wheel event) and it is placed under the parent DIV element (on which the perfect scrollbar is implemented).

Note that this is how it should work:

  • when user mouse is hovering the chart and user is scrolling the mouse wheel, the chart is "zoomed out" / "zoomed in" (the events from the highchart plugin is applied);
  • if user is not hovering the chart with the mouse and if is scrolling the mouse wheel, then the parent DIV is scrolled down;

The mentioned scenario is already implemented in the following jsfiddle and this works on Chrome browser: https://jsfiddle.net/delux123/4kh5zbxv/68/

But the problem is that this is not working on Mozilla Firefox browser. There, the chart is not "zooming out" / "zooming in" for the cases when user mouse is above the chart;

I'm was not able to detect which one of these two libraries is causing the issue, but the mouse wheel event is somehow included in the issue. I tried many combinations here, but was not able to make it working as expected in the both browsers.

EDIT:

Here is the solution based on the @User863 answer below: https://jsfiddle.net/delux123/4kh5zbxv/73/

Solution

  • The problem is delta calculated is always -1 in Firefox

    Instead, you can use deltaY directly from the event

    let delta = e.deltaY;

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

    Without using perfectScrollbar

    From version 64, firefox having scrollbar-width, scrollbar-color property. So you can style scrollbar also

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