Merge pull request #125 from SoundstripeTech/master

Fixed Chrome scroll issue
danbovey · Dec 13, 2017 · 96b119f · 96b119f
2 parents ac8581d + bd8a56a
commit 96b119f
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/dist/InfiniteScroll.js b/dist/InfiniteScroll.js
@@ -117,6 +117,7 @@ var InfiniteScroll = (function(_Component) {
       key: 'componentWillUnmount',
       value: function componentWillUnmount() {
         this.detachScrollListener();
+        this.detachMousewheelListener();
       },
 
       // Set a defaut loader for all your `InfiniteScroll` components
@@ -127,6 +128,21 @@ var InfiniteScroll = (function(_Component) {
         this.defaultLoader = loader;
       },
     },
+    {
+      key: 'detachMousewheelListener',
+      value: function detachMousewheelListener() {
+        var scrollEl = window;
+        if (this.props.useWindow === false) {
+          scrollEl = this.scrollComponent.parentNode;
+        }
+
+        scrollEl.removeEventListener(
+          'mousewheel',
+          this.mousewheelListener,
+          this.props.useCapture,
+        );
+      },
+    },
     {
       key: 'detachScrollListener',
       value: function detachScrollListener() {
@@ -159,6 +175,11 @@ var InfiniteScroll = (function(_Component) {
           scrollEl = this.scrollComponent.parentNode;
         }
 
+        scrollEl.addEventListener(
+          'mousewheel',
+          this.mousewheelListener,
+          this.props.useCapture,
+        );
         scrollEl.addEventListener(
           'scroll',
           this.scrollListener,
@@ -175,6 +196,16 @@ var InfiniteScroll = (function(_Component) {
         }
       },
     },
+    {
+      key: 'mousewheelListener',
+      value: function mousewheelListener(e) {
+        // Prevents Chrome hangups
+        // See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
+        if (e.deltaY === 1) {
+          e.preventDefault();
+        }
+      },
+    },
     {
       key: 'scrollListener',
       value: function scrollListener() {

diff --git a/src/InfiniteScroll.js b/src/InfiniteScroll.js
@@ -48,13 +48,27 @@ export default class InfiniteScroll extends Component {
 
   componentWillUnmount() {
     this.detachScrollListener();
+    this.detachMousewheelListener();
   }
 
   // Set a defaut loader for all your `InfiniteScroll` components
   setDefaultLoader(loader) {
     this.defaultLoader = loader;
   }
 
+  detachMousewheelListener() {
+    let scrollEl = window;
+    if (this.props.useWindow === false) {
+      scrollEl = this.scrollComponent.parentNode;
+    }
+
+    scrollEl.removeEventListener(
+      'mousewheel',
+      this.mousewheelListener,
+      this.props.useCapture,
+    );
+  }
+
   detachScrollListener() {
     let scrollEl = window;
     if (this.props.useWindow === false) {
@@ -83,6 +97,11 @@ export default class InfiniteScroll extends Component {
       scrollEl = this.scrollComponent.parentNode;
     }
 
+    scrollEl.addEventListener(
+      'mousewheel',
+      this.mousewheelListener,
+      this.props.useCapture,
+    );
     scrollEl.addEventListener(
       'scroll',
       this.scrollListener,
@@ -99,6 +118,14 @@ export default class InfiniteScroll extends Component {
     }
   }
 
+  mousewheelListener(e) {
+    // Prevents Chrome hangups
+    // See: https://stackoverflow.com/questions/47524205/random-high-content-download-time-in-chrome/47684257#47684257
+    if (e.deltaY === 1) {
+      e.preventDefault();
+    }
+  }
+
   scrollListener() {
     const el = this.scrollComponent;
     const scrollEl = window;