fix(column): Use passive wheel listener (#4348)

* chore(yarn): Install detect-passive-events

* fix(column): Use passive listener

1 files changed, 10 insertions, 1 deletions

diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js
index 3cbb745c5..93f1d6260 100644
--- a/app/javascript/mastodon/components/column.js
+++ b/app/javascript/mastodon/components/column.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import detectPassiveEvents from 'detect-passive-events';
 import scrollTop from '../scroll';
 
 export default class Column extends React.PureComponent {
@@ -30,11 +31,19 @@ export default class Column extends React.PureComponent {
     this.node = c;
   }
 
+  componentDidMount () {
+    this.node.addEventListener('wheel', this.handleWheel,  detectPassiveEvents ? { passive: true } : false);
+  }
+
+  componentWillUnmount () {
+    this.node.removeEventListener('wheel', this.handleWheel);
+  }
+
   render () {
     const { children } = this.props;
 
     return (
-      <div role='region' className='column' ref={this.setRef} onWheel={this.handleWheel}>
+      <div role='region' className='column' ref={this.setRef}>
         {children}
       </div>
     );