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>
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 thewheelEnabled
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: