scroll event may prevent after use inside dataZoom

[hhshii]

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

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

Have a nice day! 🍵

[pissang]

It's a bad experience if the page will scroll when you do zooming on the chart. If you still want to, you can set http://echarts.apache.org/option.html#dataZoom-inside.preventDefaultMouseMove to false

[hhshii]

@pissang I've set it in this instance

[hhshii]

@pissang I've update the code codepen even I set preventDefaultMouseMove to false,it still can 't scroll page

[hhshii]

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)

[FengHuangDong]

@GFwer Has any solutions so far ?

[hhshii]

@GFwer Has any solutions so far ?

No, I have to revert to the old version...

[easyremember]

Is there any quick solution for this issue? It results in very very bad user experience!

[ahmadordi]

I face also the same problem and preventDefaultMouseWheel: false didn't help. Any Update ?

[hhshii]

I tried the latest version of echarts(4.5), and the problem is still exist

[shv-a]

Any workarounds?

[nodesmichael]

We are having the same issue.

[55cc]

+1

[Amanda1995pig]

+1

[ahmadordi]

Any update ?

[rong12345]

+1

[techistoner]

+1

[Orangat]

+1

[cadriel]

@pissang This appears to still be an issue in V5.

Preventing page scrolling, while having set a MODIFIER key for zoom - is a bad experience. At the very least this documented property should do as it describes.

Any chance we can get a fix in place?

[vkjv]

Hi, Any luck? I also need the same functionality where, I disable mouse wheel on the chart so that the page scroll should happen. I tried preventDefaultMouseMove and various other combinations available under the dataZoom options, but none of them seem to allow page scroll.

[mfandre]

Same here... :( http://iamferraz.com.br/gantt (click on toggle data zoom)

[techistoner]

更新最新版本echarts应该也可以解决，但是基于现有开发内容我做了如下操作: 更新至echarts4.9.0 (https://raw.githubusercontent.com/apache/echarts/4.9.0/dist/echarts.js) 替换src/Echarts/tpl.html中script标签中内容为上面echarts.js内容即可升级完成 配置如下： dataZoom: [ { id: 'dataZoomX', xAxisIndex: [0], type:'inside', moveOnMouseMove: true,//zoom后横向滑动 preventDefaultMouseMove: false, } ]

[HUANGChaoLi]

any update? I meet the same problem

[pooria-h]

+1 Same problem!

[Almar]

Hello all,

I had the same problem but found the following work-around (or hack). The snipped is from Angular code; this.parentNativeElement points to the parent element that needs to scroll.

    this.chart.nativeElement.querySelector("canvas").onwheel = (event) => {
      if (!event.ctrlKey) {
        this.parentNativeElement.scrollBy(0, event.deltaY);
      }
    };

[pooria-h]

@Almar

Nice job

On a Vue.js app:

const canvas = this.$refs.nameOfTheComponent.$el.childNodes[0].children[0];
canvas.onwheel = (event) => {
  if (!event.ctrlKey) {
    window.scrollBy(0, event.deltaY);
  }
};

[Maazaowski]

@Almar @pooria-h Any similar workaround for html/javascript?

[Almar]

@Maazaowski, Yes, you can also solve the problem when using html/javascript. It is a workaround, so we're not solving the underlying problem. The mouse events are captured by the graph, which causes the problem. The workaround is basically a bypass – subscribing to the mouse events of the canvas element and then feeding them into the scroll container (the/a parent element of the graph).

To implement it yourself you’ll need to find a reference to the canvas element and the ‘scroll container’ (the parent element of the graph that needs to scroll). Your code should look something like the following (please mind that I did not test it).

Let scrollContainer = document.querySelector(“div#scrollcontainer”)
Let canvasElement = scrollContainer.querySelector(“canvas”);
canvasElement.onwheel = (event) => {
      if (!event.ctrlKey) {
        scrollContainer.scrollBy(0, event.deltaY);
      }
    };

[agardiol]

Problem still there in v 5.3.1 !

[qingxiao]

Problem still there in v 5.3.1 !

+1 in 5.3.0

[vladfrontend]

One way to solve it is to disable zoom entirely by setting zoomLock: true. For mobile devices you will also need to set preventDefaultMouseMove: false for whatever reason.

[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

[F-gen]

still not solve hh

[sgurin]

Fix, please

[ranwang0417]

Please fix orz

[ePluvinage]

I used @Almar 's workaround (thanks BTW), with some modifications to adapt it to my case, but I really don't think we should be doing this.

[haoguangchuan]

Problem still there in v 5.3.4 !

[helgasoft]

setting an inside dataZoom AND expecting a page scroll when scrolling inside chart - doesn't make much sense. Got to choose one or the other, can't have both simultaneously.

[karan182020]

When is the plan to fix this issue? Thanks.

[Xiaobaishushu25]

It has been almost five years and still exists.