Scroll smoothly to the right (#4735)
This commit is contained in:
parent
7be620775e
commit
f59ed3a4fa
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue