scroll event may prevent after use inside dataZoom

Version

4.2.1-rc.3

Reproduction link

https://codepen.io/gfwer/pen/maJGNz

Steps to reproduce

1. add an inside dataZoom(in this instance I set zoomOnMouseWheel:'shift')
2. mouse hover in the chart grid and scroll the mouse

What is expected?

page scroll

What is actually happening?

scroll event may prevent , I can 't scroll page when I move mouse over the chart grid

[hoshitomi]

This problem still seems to exist on 4.2.1 (but works fine on 4.1.0), I can’t scrll page when the mouse hover in grid, here is my DataZoom option:

	{
		type: 'inside',
        zoomOnMouseWheel:'shift',
		preventDefaultMouseWheel: false
	}

A CodePen here

It seems event is stopped by eventTool.stop(e.event)

[kaihenzler]

I wanted to share my workaround for this issue.

• The basic idea is to disable zooming by setting zoomLock: true
• Add keyboard event listener to the window for keyup and keydown
• Alter the settings of the echarts instance by setting zoomLock: false while a specific key is pressed
• set zoomLock: true when the key is released again

This can be done with vanilla JS or any ui library.

Here you can see how it’s done in Angular: https://stackblitz.com/edit/angular-ngx-echarts-qd5up4?file=src/app/app.component.ts