From 1b9534d93bf12b0e932b8791bfc5ebd45a164abc Mon Sep 17 00:00:00 2001
From: Toxblh <toxblh@gmail.com>
Date: Fri, 9 Mar 2018 16:56:46 +0000
Subject: [PATCH] If used container, scroll page outside Viewer should don't
 affect Viewer

---
 src/ViewerCanvas.tsx | 14 +++++++++++---
 src/ViewerCore.tsx   |  1 +
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/ViewerCanvas.tsx b/src/ViewerCanvas.tsx
index 2e9eb99..adef4fa 100644
--- a/src/ViewerCanvas.tsx
+++ b/src/ViewerCanvas.tsx
@@ -18,6 +18,7 @@ export interface ViewerCanvasProps {
   scaleY: number;
   loading: boolean;
   drag: boolean;
+  container: HTMLElement;
   onCanvasMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -110,8 +111,15 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     if (remove) {
       funcName = 'removeEventListener';
     }
-    document[funcName]('DOMMouseScroll', this.handleMouseScroll, false);
-    document[funcName]('mousewheel', this.handleMouseScroll, false);
+
+    let mouseScrollArea: Document | HTMLElement = document;
+
+    if (this.props.container) {
+      mouseScrollArea = this.props.container;
+    }
+
+    mouseScrollArea[funcName]('DOMMouseScroll', this.handleMouseScroll, false);
+    mouseScrollArea[funcName]('mousewheel', this.handleMouseScroll, false);
     document[funcName]('click', this.handleMouseUp, false);
     document[funcName]('mousemove', this.handleMouseMove, false);
     window[funcName]('resize', this.handleResize, false);
@@ -147,7 +155,7 @@ export default class ViewerCanvas extends React.Component<ViewerCanvasProps, Vie
     let imgStyle: React.CSSProperties = {
       width: `${this.props.width}px`,
       height: `${this.props.height}px`,
-      transform: `translateX(${this.props.left ? this.props.left + 'px' : 'aoto'}) translateY(${this.props.top}px) 
+      transform: `translateX(${this.props.left ? this.props.left + 'px' : 'aoto'}) translateY(${this.props.top}px)
       rotate(${this.props.rotate}deg) scaleX(${this.props.scaleX}) scaleY(${this.props.scaleY})`,
     };
 
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index 6519a44..a4f7064 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -524,6 +524,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         scaleY={this.state.scaleY}
         loading={this.state.loading}
         drag={this.props.drag}
+        container={this.props.container}
         onCanvasMouseDown={this.handleCanvasMouseDown}
         />
         <div className={`${this.prefixCls}-footer`} style={{zIndex: zIndex + 5}}>