javascriptreactjsdevextremedevextreme-react

Body scroll on React VectorMap devextreme component


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


Solution

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

    Edit react-custommap-devextreme (forked)