2019-07-16
How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
stackoverflow
Question

In HTML5 (I think?), Canvas elements on the page will interrupt scrolling when the mouse is hovering over them.

I have generated a page using Chart.js, which has many graphs on it, all of which are rendered inside a element.

Since the page is very long (vertically), the user will often scroll up / down the page to look at the various graphs. Each time they scroll onto a , they have to mouse out to continue scrolling, which is inconvenient.

Is there any way to override the canvas element's control of the mouse wheel event? I have no functionality tied to the mouse wheel. In the interim I've advised users to use keyboard shortcuts.

Thanks, as always, to this incredibly helpful community. If I find a work-around or solution I will post it here.

Answer
1

If you are just using Chart.js, I don't think Chart.js will hijack the wheel event. But if you use chartjs-plugin-zoom together, the wheel event will be hijacked.

(chartjs-plugin-zoom is a zoom and pan plugin for Chart.js)

chartjs-plugin-zoom hijacks mouse wheel when scrolling. If you would like the user to use mouse wheel to scroll up or down the page, instead of zooming in or out a chart, you can un-register the wheel event from the chart, as below:

var myChart = new Chart(ctx, {...});
myChart.ctx.canvas.removeEventListener('wheel', myChart._wheelHandler);

You can re-add the event handler whenever needed:

myChart.ctx.canvas.addEventListener('wheel', myChart._wheelHandler);

Check out this example on jsfiddle.

How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
See more ...