Fix bug where the list would scroll down by a small amount when adding items after scrolling up

Author: thk2b

demo/src/App.js

@@ -12,7 +12,7 @@ class App extends React.Component {
     }
   }
   createItem(){
-    return Math.random()
+    return Math.random() * 10
   }
   createItems(n){
     const arr = []
@@ -26,6 +26,11 @@ class App extends React.Component {
       items: [this.createItem(), ...this.state.items]
     })
   }
+  addItemsToStart(n){
+    this.setState({
+      items: [...this.createItems(n), ...this.state.items]
+    })
+  } 
   addItemToEnd(){
     this.setState({
       items: this.state.items.concat(this.createItem())
@@ -50,6 +55,11 @@ class App extends React.Component {
         >
           add 1 to start
         </button>
+        <button
+          onClick={e => this.addItemsToStart(5)}
+        >
+          add 5 to start
+        </button>
         <ScrolledList
           items={items}
           onScrolled={e => console.log('the list was scrolled!')}

src/index.js

@@ -8,18 +8,20 @@ const isScrolledDown = (el, threshold) => {
     return bottom >= el.scrollHeight - threshold
 }
 
-const isScrolledTop = el => el.scrollTop === 0
+const isScrolledUp = el => el.scrollTop === 0
 
 const scrollDown = el => el.scrollTop = el.scrollHeight - el.clientHeight
 
 const scrollDownBy = (amount, el) => el.scrollTop += amount
+const scrollUpBy = (amount, el) => el.scrollTop -= amount
 
 export default (Component, { isScrolledDownThreshold = 150 } = { }) => class extends React.PureComponent {
     constructor(props){
         super(props)
         this._isScrolledDown = true /* whether the user has scrolled down */
         this._el = null
-        this.scrollHeight = null
+        this._scrollHeight = null
+        this._isScrolledUp = null
     }
     scrollDownIfNeeded(){
         if(this._isScrolledDown && hasOverflow(this._el)){
@@ -28,7 +30,7 @@ export default (Component, { isScrolledDownThreshold = 150 } = { }) => class ext
     }
     handleScroll(e){
         this._isScrolledDown = isScrolledDown(this._el, isScrolledDownThreshold)
-        if(isScrolledTop(this._el)){
+        if(isScrolledUp(this._el)){
             this.props.onScrolledTop && this.props.onScrolledTop(e)
         }
         this.props.onScrolled && this.props.onScrolled(e)
@@ -37,17 +39,18 @@ export default (Component, { isScrolledDownThreshold = 150 } = { }) => class ext
         this.scrollDownIfNeeded()
     }
     componentWillUpdate(nextProps, nextState){
-        this.scrollHeight = this._el.scrollHeight
+        this._scrollHeight = this._el.scrollHeight
+        this._isScrolledUp = isScrolledUp(this._el)
     }
-    
     componentDidUpdate(){ 
-        if(this.scrollHeight !== null){
+        /* if the list is scrolled all the way up and new items are added, preserve the current scroll position */
+        if(this._isScrolledUp && this._scrollHeight !== null){
             /* the scroll height increased by this much during the update */
-            const difference = this._el.scrollHeight - this.scrollHeight
-            this.scrollHeight = null
+            const difference = this._el.scrollHeight - this._scrollHeight
+            this._scrollHeight = null
             scrollDownBy(difference, this._el)
         }
-        this.scrollDownIfNeeded()
+        else this.scrollDownIfNeeded()
     }
     render(){
         const { onScrolled, onScrolledTop, ...rest } = this.props