Fix scroll position for IE

ryank109 · Mar 7, 2018 · 4dc981d · 4dc981d
1 parent 64aa20e
commit 4dc981d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 20 deletions.
diff --git a/example-app/app/app.jsx b/example-app/app/app.jsx
@@ -8,13 +8,23 @@ import { Portal } from 'react-redux-popup';
 class App extends Component {
     constructor(props) {
         super(props);
-        this.openModal = () => this.props.openPopup('modal1');
+        this.openModal = () => props.openPopup('modal1');
+        this.scroll = () => props.refreshPopupPosition();
     }
+
+    componentDidMount() {
+        window.addEventListener('scroll', this.scroll);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('scroll', this.scroll);
+    }
+
     render() {
         return (
             <div
                 style={{overflow:'auto', height:'400px'}}
-                onScroll={this.scroll.bind(this)}
+                onScroll={this.scroll}
                 ref={div => { this.containerElement = div; }}>
                 <button onClick={this.openModal}>Open Modal</button>
                 <div className="abc" style={{height:'1000px'}}>
@@ -35,10 +45,6 @@ class App extends Component {
             </div>
         );
     }
-
-    scroll(event) {
-        this.props.refreshPopupPosition();
-    }
 }
 
 export default connect(null, { closePopup, openPopup, refreshPopupPosition })(App);
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-redux-popup",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "React redux popup",
   "license": "MIT",
   "main": "lib/react-redux-popup",

diff --git a/src/__tests__/utils.js b/src/__tests__/utils.js
@@ -462,8 +462,8 @@ describe('utils', function() {
     });
 
     it('should anchor to bottom when enough space below and window has scrolled', () => {
-        window.scrollX = 20;
-        window.scrollY = 30;
+        window.pageXOffset = 20;
+        window.pageYOffset = 30;
 
         const anchor = 'bottom';
         const rect = { bottom: 50, left: 10, right: 50, top: 10 };
@@ -488,8 +488,8 @@ describe('utils', function() {
     });
 
     it('should anchor to top when enough space above and window has scrolled', () => {
-        window.scrollX = 20;
-        window.scrollY = 30;
+        window.pageXOffset = 20;
+        window.pageYOffset = 30;
 
         const anchor = 'top';
         const rect = { bottom: 290, left: 10, right: 50, top: 250 };
@@ -514,8 +514,8 @@ describe('utils', function() {
     });
 
     it('should anchor to right when enough space on the right and window has scrolled', () => {
-        window.scrollX = 20;
-        window.scrollY = 30;
+        window.pageXOffset = 20;
+        window.pageYOffset = 30;
 
         const anchor = 'right';
         const rect = { bottom: 50, left: 10, right: 50, top: 10 };
@@ -540,8 +540,8 @@ describe('utils', function() {
     });
 
     it('should anchor to left when enough space on the left and window has scrolled', () => {
-        window.scrollX = 20;
-        window.scrollY = 30;
+        window.pageXOffset = 20;
+        window.pageYOffset = 30;
 
         const anchor = 'left';
         const rect = { bottom: 50, left: 250, right: 290, top: 10 };

diff --git a/src/utils.js b/src/utils.js
@@ -47,14 +47,14 @@ export function getPopupPosition(
                 windowWidth,
                 popupWidth,
                 rect.left,
-                rect.right) + window.scrollX,
+                rect.right) + window.pageXOffset,
             top: calculatePosition(
                 windowHeight,
                 popupHeight,
                 rect.top,
                 rect.bottom,
                 offset,
-                anchor === 'bottom') + window.scrollY
+                anchor === 'bottom') + window.pageYOffset
         };
     default: // left and right
         return {
@@ -64,12 +64,12 @@ export function getPopupPosition(
                 rect.left,
                 rect.right,
                 offset,
-                anchor === 'right') + window.scrollX,
+                anchor === 'right') + window.pageXOffset,
             top: adjustPosition(
                 windowHeight,
                 popupHeight,
                 rect.top,
-                rect.bottom) + window.scrollY
+                rect.bottom) + window.pageYOffset
         };
     }
 }