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

1 files 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;
+      }
     }
   }