CODEWITHSUNDEEP
javascripthighchartsmouseeventmousewheelperfect-scrollbar
delux
delux

Reputation: 1886

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:

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/

Upvotes: 0

Views: 593

Answers (1)

User863
User863

Reputation: 20039

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/

Upvotes: 2

Related Questions