Merge branch 'master' of github.com:mnogueron/react-easy-panzoom

README.md

@@ -139,6 +139,7 @@ render() {
 |disabled|`bool`|false|Disable pan and zoom|
 |disableKeyInteraction|`bool`|false|Disable keyboard interaction|
 |disableDoubleClickZoom|`bool`|false|Disable zoom when performing a double click|
+|disableScrollZoom|`bool`|false|Disable zoom when performing a scroll|
 |realPinch|`bool`|false|Enable real pinch interaction for touch events|
 |keyMapping|`object`|false|Define specific key mapping for keyboard interaction (e.g. `{ '<keyCode>': { x: 0, y: 1, z: 0 } }`, with `<keyCode>` being the key code to map)|
 |minZoom|`number`| |Sets the minimum zoom value|

src/PanZoom.js

@@ -17,6 +17,7 @@ type Props = {
   autoCenterZoomLevel?: number,
   disableKeyInteraction?: boolean,
   disableDoubleClickZoom?: boolean,
+  disableScrollZoom?: boolean,
   realPinch?: boolean,
   keyMapping?: { [string]: { x: number, y: number, z: number }},
   minZoom: number,
@@ -105,6 +106,7 @@ class PanZoom extends React.Component<Props, State> {
     boundaryRatioVertical: 0.8,
     boundaryRatioHorizontal: 0.8,
     disableDoubleClickZoom: false,
+    disableScrollZoom: false,
     preventPan: () => false,
   }
 
@@ -281,7 +283,8 @@ class PanZoom extends React.Component<Props, State> {
   }
 
   onWheel = (e: WheelEvent) => {
-    if (this.props.disabled) {
+    const { disableScrollZoom, disabled } = this.props
+    if (disableScrollZoom || disabled) {
       return
     }
 

stories/PanZoom.stories.js

@@ -214,6 +214,16 @@ storiesOf('react-easy-panzoom', module)
       </Box>
     </DefaultPanZoom>
   ))
+  .add('Disable Scroll Zoom Event', () => (
+    <DefaultPanZoom
+      maxZoom={Infinity}
+      disableScrollZoom={boolean('Disable Scroll Zoom', true)}
+    >
+      <Box>
+        Scroll should not zoom
+      </Box>
+    </DefaultPanZoom>
+  ))
   .add('onStateChange handler', () => {
     return (
       <>