feat: support restore scroll height when using top direction

Author: PeachScript

src/components/InfiniteLoading.vue

@@ -41,7 +41,7 @@
 import Spinner from './Spinner.vue';
 import config, { evt3rdArg, WARNINGS, STATUS } from '../config';
 import {
-  warn, throttleer, loopTracker, isBlankSlotElm,
+  warn, throttleer, loopTracker, isBlankSlotElm, scrollBarStorage,
 } from '../utils';
 
 export default {
@@ -133,6 +133,13 @@ export default {
     this.$on('$InfiniteLoading:loaded', (ev) => {
       this.isFirstLoad = false;
 
+      if (this.direction === 'top') {
+        // wait for DOM updated
+        this.$nextTick(() => {
+          scrollBarStorage.restore(this.scrollParent);
+        });
+      }
+
       if (this.status === STATUS.LOADING) {
         this.$nextTick(this.attemptLoad.bind(null, true));
       }
@@ -161,6 +168,7 @@ export default {
       this.status = STATUS.READY;
       this.isFirstLoad = true;
       throttleer.reset();
+      scrollBarStorage.remove(this.scrollParent);
       this.scrollParent.addEventListener('scroll', this.scrollHandler, evt3rdArg);
       setTimeout(this.scrollHandler, 1);
 
@@ -222,6 +230,13 @@ export default {
       ) {
         this.status = STATUS.LOADING;
 
+        if (this.direction === 'top') {
+          // wait for spinner display
+          this.$nextTick(() => {
+            scrollBarStorage.save(this.scrollParent);
+          });
+        }
+
         if (typeof this.onInfinite === 'function') {
           this.onInfinite.call(null, this.stateChanger);
         } else {
@@ -287,6 +302,8 @@ export default {
   destroyed() {
     /* istanbul ignore else */
     if (!this.status !== STATUS.COMPLETE) {
+      throttleer.reset();
+      scrollBarStorage.remove(this.scrollParent);
       this.scrollParent.removeEventListener('scroll', this.scrollHandler, evt3rdArg);
     }
   },

src/utils.js

@@ -59,6 +59,35 @@ export const loopTracker = {
   },
 };
 
+export const scrollBarStorage = {
+  key: '_infiniteScrollHeight',
+  getScrollElm(elm) {
+    return elm === window ? document.documentElement : elm;
+  },
+  save(elm) {
+    const target = this.getScrollElm(elm);
+
+    // save scroll height on the scroll parent
+    target[this.key] = target.scrollHeight;
+  },
+  restore(elm) {
+    const target = this.getScrollElm(elm);
+
+    /* istanbul ignore else */
+    if (typeof target[this.key] === 'number') {
+      target.scrollTop = target.scrollHeight - target[this.key] + target.scrollTop;
+    }
+
+    this.remove(target);
+  },
+  remove(elm) {
+    if (elm[this.key] !== undefined) {
+      // remove scroll height
+      delete elm[this.key]; // eslint-disable-line no-param-reassign
+    }
+  },
+};
+
 /**
  * determine slot is or not a empty element
  * @param   {Slot}    slot  target slot
@@ -79,4 +108,5 @@ export default {
   throttleer,
   loopTracker,
   isBlankSlotElm,
+  scrollBarStorage,
 };