diff --git a/README.md b/README.md
index 0fc4f90..fee1a90 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # react-responsive-pinch-zoom-pan
 
-A React component that adds pinch-zoom and pan capability to an `img` element. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging.
+A React component that adds pinch-zoom and pan capability to an `img` element. Both mobile and desktop browsers are supported. In desktop mode, you zoom with the mouse scrollwheel, and pan by dragging. Added ability to toggle zoom on scroll.
 
 On render, the zoom and pan values are applied using CSS transforms. 
 
diff --git a/package.json b/package.json
index cd657ef..c461aca 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "react-responsive-pinch-zoom-pan",
-  "version": "0.3.0",
+  "name": "@jungroit/react-responsive-pinch-zoom-pan",
+  "version": "0.4.8",
   "description": "Enables zooming and panning an image, both mobile and desktop.",
   "main": "dist/PinchZoomPan.js",
   "scripts": {
@@ -48,11 +48,11 @@
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "3.1.14"
   },
-  "author": "Brad Stiff",
-  "homepage": "https://github.com/bradstiff/react-responsive-pinch-zoom-pan",
+  "author": "Rohit Jung Karki",
+  "homepage": "https://github.com/jungRoit/react-responsive-pinch-zoom-pan.git",
   "repository": {
     "type": "git",
-    "url": "git@github.com:bradstiff/react-responsive-pinch-zoom-pan.git"
+    "url": "git@github.com:jungRoit/react-responsive-pinch-zoom-pan.git"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.13",
diff --git a/src/PinchZoomPan.js b/src/PinchZoomPan.js
index 2070bc2..fa2c018 100644
--- a/src/PinchZoomPan.js
+++ b/src/PinchZoomPan.js
@@ -69,7 +69,9 @@ const browserPanActions = createSelector(
 //Ensure the image is not over-panned, and not over- or under-scaled.
 //These constraints must be checked when image changes, and when container is resized.
 export default class PinchZoomPan extends React.Component {
-    state = {};
+    state = {
+        isImageMoveable: false
+    };
 
     lastPointerUpTimeStamp; //enables detecting double-tap
     lastPanPointerPosition; //helps determine how far to pan the image
@@ -154,13 +156,17 @@ export default class PinchZoomPan extends React.Component {
     }
 
     handleMouseDown = event => {
-        this.cancelAnimation();
+        if(this.state.isImageMoveable) {
+            this.cancelAnimation();
         this.pointerDown(event);
+        }
     }
 
     handleMouseMove = event => {
         if (!event.buttons) return null;
-        this.pan(event)
+        if(this.state.isImageMoveable) {
+            this.pan(event)
+        }
     }
 
     handleMouseDoubleClick = event => {
@@ -170,6 +176,9 @@ export default class PinchZoomPan extends React.Component {
     }
 
     handleMouseWheel = event => {
+        if(!this.props.zoomOnScroll) {
+            return;
+        }
         this.cancelAnimation();
         const point = getRelativePosition(event, this.imageRef.parentNode);
         if (event.deltaY > 0) {
@@ -259,9 +268,11 @@ export default class PinchZoomPan extends React.Component {
     doubleClick(pointerPosition) {
         if (String(this.props.doubleTapBehavior).toLowerCase() === 'zoom' && this.state.scale * (1 + OVERZOOM_TOLERANCE) < this.props.maxScale) {
             this.zoomIn(pointerPosition, ANIMATION_SPEED, 0.3);
+            this.props.onScaleChange(this.state.scale*1.3);
         } else {
             //reset
             this.applyInitialTransform(ANIMATION_SPEED);
+            this.props.onScaleChange(1);
         }
     }
 
@@ -396,6 +407,8 @@ export default class PinchZoomPan extends React.Component {
                 top,
                 left,
                 scale,
+            },()=> {
+                this.props.onScaleChange(scale);
             });
         }
     }
@@ -506,7 +519,7 @@ export default class PinchZoomPan extends React.Component {
         const containerStyle = {
             width: '100%', 
             height: '100%',
-            overflow: 'hidden',
+            overflow: 'scroll',
             touchAction: touchAction,
         };
 
@@ -517,7 +530,9 @@ export default class PinchZoomPan extends React.Component {
                     minScale={getMinScale(this.state, this.props)} 
                     maxScale={maxScale} 
                     onZoomOutClick={this.handleZoomOutClick} 
-                    onZoomInClick={this.handleZoomInClick} 
+                    onZoomInClick={this.handleZoomInClick}
+                    isImageMoveable={this.state.isImageMoveable}
+                    toggleImageMove={()=>{this.setState({isImageMoveable:!this.state.isImageMoveable})}}
                 />}
                 {debug && <DebugView {...this.state} overflow={imageOverflow(this.state)} />}
                 {React.cloneElement(childElement, {
@@ -610,7 +625,9 @@ PinchZoomPan.defaultProps = {
     maxScale: 1,
     position: 'topLeft',
     zoomButtons: true,
-    doubleTapBehavior: 'reset'
+    doubleTapBehavior: 'reset',
+    zoomOnScroll: true,
+    onScaleChange: ()=>{}
 };
 
 PinchZoomPan.propTypes = {
@@ -629,4 +646,6 @@ PinchZoomPan.propTypes = {
     doubleTapBehavior: PropTypes.oneOf(['reset', 'zoom']),
     initialTop: PropTypes.number,
     initialLeft: PropTypes.number,
+    zoomOnScroll: PropTypes.bool,
+    onScaleChange: PropTypes.func
 };
diff --git a/src/ZoomButtons.js b/src/ZoomButtons.js
index 3cb05be..91805fa 100644
--- a/src/ZoomButtons.js
+++ b/src/ZoomButtons.js
@@ -6,6 +6,7 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faMinus } from '@fortawesome/free-solid-svg-icons/faMinus';
 
 import './styles.css';
+import { faHandPaper } from '@fortawesome/free-solid-svg-icons/faHandPaper';
 
 const containerStyle = { 
     position: 'absolute', 
@@ -24,10 +25,17 @@ const ZoomInButton = ({ disabled, onClick }) => (
     </button>
 );
 
-const ZoomButtons = ({scale, minScale, maxScale, onZoomInClick, onZoomOutClick}) => (
+const DragButton = ({ active, disabled, onClick }) => (
+    <button className='iconButton' style={{ margin: '10px', marginLeft: '0px'}} onClick={onClick} disabled={disabled}>
+        <FontAwesomeIcon color={ active? '#3F78AD': '#000000' } icon={faHandPaper} fixedWidth />
+    </button>
+);
+
+const ZoomButtons = ({scale, minScale, maxScale, onZoomInClick, onZoomOutClick,isImageMoveable,toggleImageMove}) => (
     <div style={containerStyle}>
         <ZoomOutButton onClick={onZoomOutClick} disabled={scale <= minScale} />
         <ZoomInButton onClick={onZoomInClick} disabled={scale >= maxScale} />
+        <DragButton active={isImageMoveable} onClick={toggleImageMove} />
     </div>
 );
 
@@ -37,6 +45,8 @@ ZoomButtons.propTypes = {
     maxScale: PropTypes.number.isRequired,
     onZoomInClick: PropTypes.func.isRequired,
     onZoomOutClick: PropTypes.func.isRequired,
+    toggleImageMove: PropTypes.func.isRequired,
+    isImageMoveable: PropTypes.bool,
 };
 
 export default ZoomButtons;
\ No newline at end of file