Merge pull request danbovey#196 from timbielawski/feature/passive-event-listeners

Feature/passive event listeners

Author: danbovey

dist/InfiniteScroll.js

@@ -96,6 +96,8 @@ var InfiniteScroll = (function(_Component) {
     );
 
     _this.scrollListener = _this.scrollListener.bind(_this);
+    _this.eventListenerOptions = _this.eventListenerOptions.bind(_this);
+    _this.mousewheelListener = _this.mousewheelListener.bind(_this);
     return _this;
   }
 
@@ -104,6 +106,7 @@ var InfiniteScroll = (function(_Component) {
       key: 'componentDidMount',
       value: function componentDidMount() {
         this.pageLoaded = this.props.pageStart;
+        this.options = this.eventListenerOptions();
         this.attachScrollListener();
       }
     },
@@ -126,8 +129,40 @@ var InfiniteScroll = (function(_Component) {
       value: function componentWillUnmount() {
         this.detachScrollListener();
         this.detachMousewheelListener();
-      }
+      },
+    },
+    {
+      key: 'isPassiveSupported',
+      value: function isPassiveSupported() {
+        var passive = false;
+
+        var testOptions = {
+          get passive() {
+            passive = true;
+          },
+        };
 
+        try {
+          document.addEventListener('test', null, testOptions);
+        } catch (e) {
+          // ignore
+        }
+        return passive;
+      },
+    },
+    {
+      key: 'eventListenerOptions',
+      value: function eventListenerOptions() {
+        var options = false;
+
+        if (this.isPassiveSupported()) {
+          options = {
+            useCapture: this.props.useCapture,
+            passive: this.props.passive,
+          };
+        }
+        return options;
+      }
       // Set a defaut loader for all your `InfiniteScroll` components
     },
     {
@@ -147,7 +182,7 @@ var InfiniteScroll = (function(_Component) {
         scrollEl.removeEventListener(
           'mousewheel',
           this.mousewheelListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture
         );
       }
     },
@@ -162,12 +197,12 @@ var InfiniteScroll = (function(_Component) {
         scrollEl.removeEventListener(
           'scroll',
           this.scrollListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture
         );
         scrollEl.removeEventListener(
           'resize',
           this.scrollListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture
         );
       }
     },
@@ -205,17 +240,17 @@ var InfiniteScroll = (function(_Component) {
         scrollEl.addEventListener(
           'mousewheel',
           this.mousewheelListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture,
         );
         scrollEl.addEventListener(
           'scroll',
           this.scrollListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture,
         );
         scrollEl.addEventListener(
           'resize',
           this.scrollListener,
-          this.props.useCapture
+          this.options ? this.options : this.props.useCapture
         );
 
         if (this.props.initialLoad) {
@@ -228,7 +263,10 @@ var InfiniteScroll = (function(_Component) {
       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) {
+        if (
+          e.deltaY === 1 &&
+          (!this.props.passive || !this.isPassiveSupported())
+        ) {
           e.preventDefault();
         }
       }

package.json

@@ -9,8 +9,7 @@
     "url": "git://github.com/CassetteRocks/react-infinite-scroller.git"
   },
   "scripts": {
-    "build":
-      "mkdirp dist && babel src/InfiniteScroll.js --out-file dist/InfiniteScroll.js",
+    "build": "mkdirp dist && babel src/InfiniteScroll.js --out-file dist/InfiniteScroll.js",
     "prepublish": "npm run build",
     "test": "nyc npm run spec",
     "spec": "_mocha -R spec ./test/test_helper.js --recursive test/*_test.js",
@@ -23,7 +22,11 @@
       "git add"
     ]
   },
-  "keywords": ["infinite", "scroll", "react"],
+  "keywords": [
+    "infinite",
+    "scroll",
+    "react"
+  ],
   "author": "CassetteRocks",
   "license": "MIT",
   "bugs": {

src/InfiniteScroll.js

@@ -36,10 +36,13 @@ export default class InfiniteScroll extends Component {
     super(props);
 
     this.scrollListener = this.scrollListener.bind(this);
+    this.eventListenerOptions = this.eventListenerOptions.bind(this);
+    this.mousewheelListener = this.mousewheelListener.bind(this);
   }
 
   componentDidMount() {
     this.pageLoaded = this.props.pageStart;
+    this.options = this.eventListenerOptions();
     this.attachScrollListener();
   }
 
@@ -60,6 +63,36 @@ export default class InfiniteScroll extends Component {
     this.detachMousewheelListener();
   }
 
+  isPassiveSupported() {
+    let passive = false;
+
+    const testOptions = {
+      get passive() {
+        passive = true;
+      }
+    };
+
+    try {
+      document.addEventListener('test', null, testOptions);
+      document.removeEventListener('test', null, testOptions);
+    } catch (e) {
+      // ignore
+    }
+    return passive;
+  }
+
+  eventListenerOptions() {
+    let options = this.props.useCapture;
+
+    if (this.isPassiveSupported()) {
+      options = {
+        useCapture: this.props.useCapture,
+        passive: true
+      };
+    }
+    return options;
+  }
+
   // Set a defaut loader for all your `InfiniteScroll` components
   setDefaultLoader(loader) {
     this.defaultLoader = loader;
@@ -74,7 +107,7 @@ export default class InfiniteScroll extends Component {
     scrollEl.removeEventListener(
       'mousewheel',
       this.mousewheelListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
   }
 
@@ -87,12 +120,12 @@ export default class InfiniteScroll extends Component {
     scrollEl.removeEventListener(
       'scroll',
       this.scrollListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
     scrollEl.removeEventListener(
       'resize',
       this.scrollListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
   }
 
@@ -124,17 +157,17 @@ export default class InfiniteScroll extends Component {
     scrollEl.addEventListener(
       'mousewheel',
       this.mousewheelListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
     scrollEl.addEventListener(
       'scroll',
       this.scrollListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
     scrollEl.addEventListener(
       'resize',
       this.scrollListener,
-      this.props.useCapture
+      this.options ? this.options : this.props.useCapture
     );
 
     if (this.props.initialLoad) {
@@ -145,7 +178,7 @@ 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) {
+    if (e.deltaY === 1 && !this.isPassiveSupported()) {
       e.preventDefault();
     }
   }