Fix Firefox scroll position may be locked occasionally (#12)

* Fix Firefox scroll position locking

* Remove console.log

* Clean up

* Update PR number

* Typo

Author: compulim

CHANGELOG.md

@@ -5,12 +5,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Changed
+- `Composer`: fix #13, user scrolling in Firefox may have the scroll position locked occasionally, in PR [#12](https://github.com/compulim/react-scroll-to-bottom/issues/12)
 
 ## [1.3.0] - 2019-01-21
 ### Changed
 - Playground: bumped to `[email protected]`, `[email protected]`, and `[email protected]`
-- Update algorithm, instead of using `componentDidUpdate`, we now use `setInterval` to check if the panel is sticky or not, this help to track content update that happen outside of React lifecycle, for example, `HTMLImageElement.onload` event
-- `scrollTo()` now accepts `"100%"` instead of `"bottom"`
+- `*`: Update algorithm, instead of using `componentDidUpdate`, we now use `setInterval` to check if the panel is sticky or not, this help to track content update that happen outside of React lifecycle, for example, `HTMLImageElement.onload` event
+- `Composer`: `scrollTo()` now accepts `"100%"` instead of `"bottom"`
 
 ### Removed
 - Removed `threshold` props because the algorithm is now more robust

packages/component/src/ScrollToBottom/Composer.js

@@ -9,7 +9,8 @@ import InternalContext from './InternalContext';
 import SpineTo from '../SpineTo';
 import StateContext from './StateContext';
 
-const MIN_CHECK_INTERVAL = 17;
+const MIN_CHECK_INTERVAL = 17;       // 1 frame
+const SCROLL_DECISION_DURATION = 34; // 2 frames
 
 function setImmediateInterval(fn, ms) {
   fn();
@@ -85,15 +86,33 @@ export default class Composer extends React.Component {
   enableWorker() {
     clearInterval(this._stickyCheckTimeout);
 
+    let stickyButNotAtEndSince = false;
+
     this._stickyCheckTimeout = setImmediateInterval(
       () => {
         const { state } = this;
         const { stateContext: { sticky }, target } = state;
 
-        if (sticky && target) {
-          const { atEnd } = computeViewState(state);
-
-          !atEnd && state.functionContext.scrollToEnd();
+        if (
+          sticky
+          && target
+          && !computeViewState(state).atEnd
+        ) {
+          if (!stickyButNotAtEndSince) {
+            stickyButNotAtEndSince = Date.now();
+          } else if (Date.now() - stickyButNotAtEndSince > SCROLL_DECISION_DURATION) {
+            // Quirks: In Firefox, after user scroll down, Firefox do two things:
+            //         1. Set to a new "scrollTop"
+            //         2. Fire "scroll" event
+            //         For what we observed, #1 is fired about 20ms before #2. There is a chance that this stickyCheckTimeout is being scheduled between 1 and 2.
+            //         That means, if we just look at #1 to decide if we should scroll, we will always scroll, in oppose to the user's intention.
+            // Repro: Open Firefox, set checkInterval to a lower number, and try to scroll by dragging the scroll handler. It will jump back.
+
+            state.functionContext.scrollToEnd();
+            stickyButNotAtEndSince = false;
+          }
+        } else {
+          stickyButNotAtEndSince = false;
         }
       },
       Math.max(MIN_CHECK_INTERVAL, this.props.checkInterval) || MIN_CHECK_INTERVAL
@@ -207,7 +226,7 @@ export default class Composer extends React.Component {
 }
 
 Composer.defaultProps = {
-  checkInterval: 150,
+  checkInterval: 100,
   debounce: 17
 };