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

Fix jittery scrolling for Chromium browsers (#3776) (#3832)

This commit is contained in:
Nolan Lawson 2017-06-17 17:59:29 -07:00 committed by Eugen Rochko
parent 1d9f9352a6
commit 1f2abd8d67
1 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/mastodon/components/status_list.js
View File

@ -6,6 +6,7 @@ import StatusContainer from '../containers/status_container';
import LoadMore from './load_more'; import LoadMore from './load_more';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'; import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper';
import { debounce } from 'lodash';
class StatusList extends ImmutablePureComponent { class StatusList extends ImmutablePureComponent {
@ -29,7 +30,7 @@ class StatusList extends ImmutablePureComponent {
intersectionObserverWrapper = new IntersectionObserverWrapper(); intersectionObserverWrapper = new IntersectionObserverWrapper();
handleScroll = (e) => { handleScroll = debounce((e) => {
const { scrollTop, scrollHeight, clientHeight } = e.target; const { scrollTop, scrollHeight, clientHeight } = e.target;
const offset = scrollHeight - scrollTop - clientHeight; const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop; this._oldScrollPosition = scrollHeight - scrollTop;
@ -41,7 +42,9 @@ class StatusList extends ImmutablePureComponent {
} else if (this.props.onScroll) { } else if (this.props.onScroll) {
this.props.onScroll(); this.props.onScroll();
} }
} }, 200, {
trailing: true,
});
componentDidMount () { componentDidMount () {
this.attachScrollListener(); this.attachScrollListener();
@ -49,8 +52,16 @@ class StatusList extends ImmutablePureComponent {
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if ((prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition) && this.node.scrollTop > 0) { // Reset the scroll position when a new toot comes in in order not to
this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; // jerk the scrollbar around if you're already scrolled down the page.
if (prevProps.statusIds.size < this.props.statusIds.size &&
prevProps.statusIds.first() !== this.props.statusIds.first() &&
this._oldScrollPosition &&
this.node.scrollTop > 0) {
let newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop;
}
} }
} }