Scroll smoothly to the right (#4735)

pull/4736/head
abcang 2017-08-30 00:06:19 +09:00 committed by Eugen Rochko
parent 7be620775e
commit f59ed3a4fa
2 changed files with 16 additions and 2 deletions

View File

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

View File

@ -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); export const scrollTop = (node) => scroll(node, 'scrollTop', 0);