mastofe

commit: 1f2abd8d672288939232cbe1e2ce063f3ab4f0b4
parent: 1d9f9352a66e24f21efef4e61fa4f997219bbea3
Author: Nolan Lawson <nolan@nolanlawson.com>
Date:   Sat, 17 Jun 2017 17:59:29 -0700

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


Diffstat:
M
app/javascript/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
@@ -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;
+      }
     }
   }