Scroll smoothly to the right (#4735)

app/javascript/mastodon/features/ui/components/columns_area.js

@@ -12,6 +12,7 @@ import ColumnLoading from './column_loading';
 import BundleColumnError from './bundle_column_error';
 import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components';
 
+import detectPassiveEvents from 'detect-passive-events';
 import { scrollRight } from '../../../scroll';
 
 const componentMap = {
@@ -47,6 +48,7 @@ export default class ColumnsArea extends ImmutablePureComponent {
   }
 
   componentDidMount() {
+    this.node.addEventListener('wheel', this.handleWheel,  detectPassiveEvents ? { passive: true } : false);
     this.lastIndex = getIndex(this.context.router.history.location.pathname);
     this.setState({ shouldAnimate: true });
   }
@@ -56,9 +58,13 @@ export default class ColumnsArea extends ImmutablePureComponent {
     this.setState({ shouldAnimate: true });
   }
 
+  componentWillUnmount () {
+    this.node.removeEventListener('wheel', this.handleWheel);
+  }
+
   handleChildrenContentChange() {
     if (!this.props.singleColumn) {
-      scrollRight(this.node);
+      scrollRight(this.node, this.node.scrollWidth - window.innerWidth);
     }
   }
 
@@ -82,6 +88,14 @@ export default class ColumnsArea extends ImmutablePureComponent {
     }
   }
 
+  handleWheel = () => {
+    if (typeof this._interruptScrollAnimation !== 'function') {
+      return;
+    }
+
+    this._interruptScrollAnimation();
+  }
+
   setRef = (node) => {
     this.node = node;
   }

app/javascript/mastodon/scroll.js

@@ -26,5 +26,5 @@ const scroll = (node, key, target) => {
   };
 };
 
-export const scrollRight = (node) => scroll(node, 'scrollLeft', node.scrollWidth);
+export const scrollRight = (node, position) => scroll(node, 'scrollLeft', position);
 export const scrollTop = (node) => scroll(node, 'scrollTop', 0);