Body scroll on React VectorMap devextreme component

Question

I am using a devextreme VectorMap Component, i have disabled zoom and panning

zoomingEnabled={false}
panningEnabled={false}

My problem is that even if i scroll on my VectorMap i want the body scrolling. I have reproduced my case here in this codesandbox

As you can see if i scroll on the VectorMap the body is not scrolling, this is not happening if i do the same in the red section below.

How can i achieve the same behaviour?

  <VectorMap
    id="vector-map"
    title="Generic Map"
    zoomingEnabled={false}
    panningEnabled={false}
    onClick={(e) => console.log(e)}
  >
    <Layer
      dataSource={pangaeaContinents}
      name="areas"
      color="#bb7862"
    />
  </VectorMap>

Demo Codesandbox

0stone0 · Accepted Answer · 2023-03-15T16:11:42.480

The Devextreme VectorMap Component has a prop to disable scrolling:

wheelEnabled

Specifies whether or not the map should respond when a user rolls the mouse wheel.

Type: Boolean
Default Value: true

Rolling the mouse wheel zooms a map. If you need to disable this capability, assign false to the wheelEnabled property.
A user will still be able to zoom the map using the control bar.

^{Documentation page}

<VectorMap
    id="vector-map"
    title="Generic Map"
    zoomingEnabled={false}
    panningEnabled={false}
    wheelEnabled={false}
    onClick={(e) => console.log(e)}
>

Updated snippet:

Body scroll on React VectorMap devextreme component

1 Answers1

`wheelEnabled`

^{Documentation page}