erik/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2024-08-20 21:08:15 -07:00
Code Issues Projects Releases Wiki Activity

Scroll smoothly to the right (#4735)

Browse source
This commit is contained in:
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
Show stats Download patch file Download diff file Expand all files Collapse all files

16
app/javascript/mastodon/features/ui/components/columns_area.js
View file

@ -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;
}

2
app/javascript/mastodon/scroll.js
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);