diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index b8f3a5ccb..2dd71dbc6 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/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; } diff --git a/app/javascript/mastodon/scroll.js b/app/javascript/mastodon/scroll.js index 44f95b17f..2af07e0fb 100644 --- a/app/javascript/mastodon/scroll.js +++ b/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);