* [bug] need to restore the scroll position when direction is top

src/components/InfiniteLoading.vue

@@ -75,6 +75,22 @@ const evt3rdArg = (() => {
   return result;
 })();
 
+function restoreScrollPos() {
+  if (this.lastHeight) {
+    let vPos = this.topScrollPos;
+    if (vPos <= 1) {
+      vPos *= this.scrollParent.clientHeight;
+    }
+    const vOffset = this.scrollParent.scrollHeight - this.lastHeight;
+    if (vOffset >= vPos) {
+      this.scrollParent.scrollTop = vOffset + this.distance;
+    } else {
+      this.scrollParent.scrollTop = this.distance + 1;
+    }
+    this.lastHeight = 0;
+  }
+}
+
 export default {
   name: 'InfiniteLoading',
   data() {
@@ -126,6 +142,16 @@ export default {
       default: 'bottom',
     },
     forceUseInfiniteWrapper: null,
+    /*
+      topScrollPos for direction is 'top'
+      pos = clientHeight * value when value in [0, 1]
+      pos = value when value > 1
+    */
+    topScrollPos: {
+      type: Number,
+      validator: value => value >= 0,
+      default: 1,
+    },
   },
   mounted() {
     this.scrollParent = this.getScrollParent();
@@ -151,6 +177,7 @@ export default {
 
     this.$on('$InfiniteLoading:loaded', (ev) => {
       this.isFirstLoad = false;
+      restoreScrollPos.call(this);
 
       if (this.isLoading) {
         this.$nextTick(this.attemptLoad.bind(null, true));
@@ -164,6 +191,7 @@ export default {
     this.$on('$InfiniteLoading:complete', (ev) => {
       this.isLoading = false;
       this.isComplete = true;
+      restoreScrollPos.call(this);
 
       // force re-complation computed properties to fix the problem of get slot text delay
       this.$nextTick(() => {
@@ -178,6 +206,7 @@ export default {
     });
 
     this.$on('$InfiniteLoading:reset', () => {
+      this.lastHeight = 0;
       this.isLoading = false;
       this.isComplete = false;
       this.isFirstLoad = true;
@@ -238,6 +267,9 @@ export default {
         && (this.$el.offsetWidth + this.$el.offsetHeight) > 0
       ) {
         this.isLoading = true;
+        if (!this.lastHeight && this.direction === 'top') {
+          this.lastHeight = this.scrollParent.scrollHeight;
+        }
 
         if (typeof this.onInfinite === 'function') {
           this.onInfinite.call(null, this.stateChanger);
@@ -259,6 +291,8 @@ export default {
           if (this.continuousCallTimes > LOOP_CHECK_MAX_CALLS) {
             console.error(ERRORS.INFINITE_LOOP);
             this.infiniteLoopChecked = true;
+            // Avoid the Chrome Browser frozen.
+            // this.$emit('$InfiniteLoading:complete', { target: this });
           }
         }
       } else {
@@ -295,12 +329,18 @@ export default {
     getScrollParent(elm = this.$el) {
       let result;
 
-      if (elm.tagName === 'BODY') {
-        result = window;
-      } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
-        result = elm;
-      } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
-        result = elm;
+      if (typeof this.forceUseInfiniteWrapper === 'string') {
+        result = elm.querySelector(this.forceUseInfiniteWrapper);
+      }
+
+      if (!result) {
+        if (elm.tagName === 'BODY') {
+          result = window;
+        } else if (!this.forceUseInfiniteWrapper && ['scroll', 'auto'].indexOf(getComputedStyle(elm).overflowY) > -1) {
+          result = elm;
+        } else if (elm.hasAttribute('infinite-wrapper') || elm.hasAttribute('data-infinite-wrapper')) {
+          result = elm;
+        }
       }
 
       return result || this.getScrollParent(elm.parentNode);
@@ -312,6 +352,7 @@ export default {
     }
   },
 };
+
 </script>
 <style lang="less" scoped>
 @deep: ~'>>>';

test/unit/specs/InfiniteLoading.spec.js

@@ -80,6 +80,11 @@ describe('vue-infinite-loading', () => {
       ul li {
         height: 40px;
       }
+      .scroll {
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
     `;
 
     document.body.appendChild(styles);
@@ -564,6 +569,231 @@ describe('vue-infinite-loading', () => {
       },
     }));
 
+    vm.$mount('#app');
+  });
+  it('should find my forcible element as scroll wrapper when using `forceUseInfiniteWrapper` to select', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div class="scroll">
+          <div style="overflow: auto;">
+            <div style="overflow: auto;">
+              <ul>
+                <li v-for="item in list" v-text="item"></li>
+              </ul>
+              <infinite-loading
+                :direction="direction"
+                @infinite="infiniteHandler"
+                ref="infiniteLoading"
+                force-use-infinite-wrapper=".scroll"
+                >
+              </infinite-loading>
+            </div>
+          </div>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler() {
+          expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el);
+          done();
+        },
+      },
+    }));
+
+    vm.$mount('#app');
+  });
+  it('should find my forcible element as scroll wrapper when not using `infiniteWrapperClass` property', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div style="overflow: auto;">
+          <div class="scroll">
+            <div>
+              <ul>
+                <li v-for="item in list" v-text="item"></li>
+              </ul>
+              <infinite-loading
+                :direction="direction"
+                @infinite="infiniteHandler"
+                ref="infiniteLoading"
+                infinite-wrapper-class=""
+                >
+              </infinite-loading>
+            </div>
+          </div>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler() {
+          expect(this.$refs.infiniteLoading.scrollParent).to.equal(this.$el);
+          done();
+        },
+      },
+    }));
+
+    vm.$mount('#app');
+  });
+  it('should restore the scroll position to the distance if the incremented size is less than the client height when direction is top', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div style="overflow: auto;">
+          <infinite-loading
+            direction="top"
+            :distance="1"
+            @infinite="infiniteHandler"
+            ref="infiniteLoading"
+          >
+          </infinite-loading>
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler($state) {
+          for (let i = 0, j = this.list.length; i < 2; i += 1) {
+            this.list.push(j + i);
+          }
+
+          const expectedLength = this.list.length;
+          const isComplete = expectedLength > 3;
+
+          // check spinner
+          expect(isShow(this.$el.querySelector('.loading-default'))).to.be.true;
+
+          if (isComplete) {
+            $state.complete();
+          } else {
+            $state.loaded();
+          }
+
+          this.$nextTick(() => {
+            const vInfLoading = this.$refs.infiniteLoading;
+            const vScrollParent = vInfLoading.scrollParent;
+            expect(vScrollParent.scrollTop).to.equal(vInfLoading.distance + 1);
+            // check list items
+            expect(this.$el.querySelectorAll('ul li')).to.have.lengthOf(expectedLength);
+
+            if (isComplete) {
+              // check no more text
+              expect(isShow(this.$el.querySelectorAll('.infinite-status-prompt')[1])).to.be.true;
+              done();
+            }
+          });
+        },
+      },
+    }));
+
+    vm.$mount('#app');
+  });
+  it('should restore the scroll position when direction is top', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div style="overflow: auto;">
+          <infinite-loading
+            direction="top"
+            :distance="1"
+            @infinite="infiniteHandler"
+            ref="infiniteLoading"
+          >
+          </infinite-loading>
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler($state) {
+          const vInfLoading = this.$refs.infiniteLoading;
+          const vScrollParent = vInfLoading.scrollParent;
+
+          for (let i = 0, j = this.list.length; i < 5; i += 1) {
+            this.list.push(j + i);
+          }
+
+          const expectedLength = this.list.length;
+          const isComplete = expectedLength > 6;
+
+          // check spinner
+          expect(isShow(this.$el.querySelector('.loading-default'))).to.be.true;
+          this.$nextTick(() => {
+            const vClientHeight = vScrollParent.clientHeight;
+            const maxScrollTop = vScrollParent.scrollHeight - vClientHeight;
+            let vExpectedPos = vScrollParent.scrollHeight - vInfLoading.lastHeight
+              + vInfLoading.distance;
+            if (vExpectedPos > maxScrollTop) vExpectedPos = maxScrollTop;
+            if (isComplete) {
+              $state.complete();
+            } else {
+              $state.loaded();
+            }
+
+            expect(vScrollParent.scrollTop).to.equal(vExpectedPos);
+            // check list items
+            expect(this.$el.querySelectorAll('ul li')).to.have.lengthOf(expectedLength);
+
+            if (isComplete) {
+              done();
+            } else {
+              vScrollParent.scrollTop = 0;
+            }
+          });
+        },
+      },
+    }));
+
+    vm.$mount('#app');
+  });
+  it('should restore the scroll position(topScrollPos) when direction is top', (done) => {
+    vm = new Vue(Object.assign({}, basicConfig, {
+      template: `
+        <div style="overflow: auto;">
+          <infinite-loading
+            direction="top"
+            :distance="1"
+            @infinite="infiniteHandler"
+            :topScrollPos="300"
+            ref="infiniteLoading"
+          >
+          </infinite-loading>
+          <ul>
+            <li v-for="item in list" v-text="item"></li>
+          </ul>
+        </div>
+      `,
+      methods: {
+        infiniteHandler: function infiniteHandler($state) {
+          const vInfLoading = this.$refs.infiniteLoading;
+          const vScrollParent = vInfLoading.scrollParent;
+
+          for (let i = 0, j = this.list.length; i < 5; i += 1) {
+            this.list.push(j + i);
+          }
+
+          const expectedLength = this.list.length;
+          const isComplete = expectedLength > 6;
+
+          // check spinner
+          expect(isShow(this.$el.querySelector('.loading-default'))).to.be.true;
+          this.$nextTick(() => {
+            if (isComplete) {
+              $state.complete();
+            } else {
+              $state.loaded();
+            }
+
+            expect(vScrollParent.scrollTop).to.equal(2);
+            // check list items
+            expect(this.$el.querySelectorAll('ul li')).to.have.lengthOf(expectedLength);
+
+            if (isComplete) {
+              done();
+            } else {
+              vScrollParent.scrollTop = 0;
+            }
+          });
+        },
+      },
+    }));
+
     vm.$mount('#app');
   });
 });