cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Fix scroll behavior and others on paused timeline (#4864) 

Resolved:

* Lot of redundant renders while mouse moving
* Scroll jumping when timeline loaded
* Scroll position isn't kept when statuses below the scrollTop was deleted then new status arrived

Unresolved:

* Scroll position isn't kept when statuses over the scrollTop was deleted then new status arrived
-> It needs to know which statuses are over the scrollTop
* New status indicator should be active when new statuses arrived while mouse moved recently
-> It needs a) update indicator in ScrollableList, or b) set scrollTop status while mouse moving
This commit is contained in:
unarist 2017-09-09 21:16:11 +09:00 committed by Eugen Rochko
parent c9d04f1c39
commit c7908e2d09
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/mastodon/components/scrollable_list.js
View File

@ -52,11 +52,11 @@ export default class ScrollableList extends PureComponent {
}); });
handleMouseMove = throttle(() => { handleMouseMove = throttle(() => {
this.setState({ lastMouseMove: new Date() }); this._lastMouseMove = new Date();
}, 300); }, 300);
handleMouseLeave = () => { handleMouseLeave = () => {
this.setState({ lastMouseMove: null }); this._lastMouseMove = null;
} }
componentDidMount () { componentDidMount () {
@ -68,18 +68,20 @@ export default class ScrollableList extends PureComponent {
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
const someItemInserted = React.Children.count(prevProps.children) > 0 &&
React.Children.count(prevProps.children) < React.Children.count(this.props.children) &&
this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props);
// Reset the scroll position when a new child comes in in order not to // Reset the scroll position when a new child comes in in order not to
// jerk the scrollbar around if you're already scrolled down the page. // jerk the scrollbar around if you're already scrolled down the page.
if (React.Children.count(prevProps.children) < React.Children.count(this.props.children) && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) { if (someItemInserted && this._oldScrollPosition && (this.node.scrollTop > 0 || this._recentlyMoved())) {
if (this.getFirstChildKey(prevProps) !== this.getFirstChildKey(this.props)) { const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
const newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
if (this.node.scrollTop !== newScrollTop) { if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop; this.node.scrollTop = newScrollTop;
}
} else {
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
} }
} else {
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
} }
} }
@ -128,7 +130,7 @@ export default class ScrollableList extends PureComponent {
} }
_recentlyMoved () { _recentlyMoved () {
return this.state.lastMouseMove === null || ((new Date()) - this.state.lastMouseMove < 600); return this._lastMouseMove !== null && ((new Date()) - this._lastMouseMove < 600);
} }
handleKeyDown = (e) => { handleKeyDown = (e) => {