From 1f2abd8d672288939232cbe1e2ce063f3ab4f0b4 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 17 Jun 2017 17:59:29 -0700 Subject: [PATCH] Fix jittery scrolling for Chromium browsers (#3776) (#3832) --- .../mastodon/components/status_list.js | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/app/javascript/mastodon/components/status_list.js b/app/javascript/mastodon/components/status_list.js index b5a853589..b73a73d1b 100644 --- a/app/javascript/mastodon/components/status_list.js +++ b/app/javascript/mastodon/components/status_list.js @@ -6,6 +6,7 @@ import StatusContainer from '../containers/status_container'; import LoadMore from './load_more'; import ImmutablePureComponent from 'react-immutable-pure-component'; import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'; +import { debounce } from 'lodash'; class StatusList extends ImmutablePureComponent { @@ -29,7 +30,7 @@ class StatusList extends ImmutablePureComponent { intersectionObserverWrapper = new IntersectionObserverWrapper(); - handleScroll = (e) => { + handleScroll = debounce((e) => { const { scrollTop, scrollHeight, clientHeight } = e.target; const offset = scrollHeight - scrollTop - clientHeight; this._oldScrollPosition = scrollHeight - scrollTop; @@ -41,7 +42,9 @@ class StatusList extends ImmutablePureComponent { } else if (this.props.onScroll) { this.props.onScroll(); } - } + }, 200, { + trailing: true, + }); componentDidMount () { this.attachScrollListener(); @@ -49,8 +52,16 @@ class StatusList extends ImmutablePureComponent { } componentDidUpdate (prevProps) { - if ((prevProps.statusIds.size < this.props.statusIds.size && prevProps.statusIds.first() !== this.props.statusIds.first() && !!this._oldScrollPosition) && this.node.scrollTop > 0) { - this.node.scrollTop = this.node.scrollHeight - this._oldScrollPosition; + // Reset the scroll position when a new toot comes in in order not to + // 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; + } } }