PeachScript / vue-infinite-loading

An infinite scroll plugin for Vue.js.
https://peachscript.github.io/vue-infinite-loading/
MIT License
2.66k stars 368 forks source link

Calling $state.complete at top direction scroll. #246

Open gigosa opened 5 years ago

gigosa commented 5 years ago

Thanks to your great work.

I'm using top direction scroll. When I call $state.complete() at the top of the list, scroll position will not come back to the previous place. The following is reproduction link. https://jsfiddle.net/n4p7ovm6/

I have a question that, does this plugin assumes to call $state.complete() only when the response data length of the API is 0?

I will also describe how I solved it.

this.$nextTick(() => {
  const target = document.documentElement;
  target.scrollTop = target.scrollHeight - target._infiniteScrollHeight + target.scrollTop;
});
$state.complete();

If this plugin assumes to call $state.complete() at any other times, I think it can be fixed by adding scrollBarStorage.restore(this.scrollParent); before this.$forceUpdate(). IMHO.

Thank you!

PeachScript commented 5 years ago

@gigosa It is a bug, I will fix it in the next version, thanks a lot and glad you like it :D

diogocpedrosa commented 4 years ago

I wasn't able to see any problem in the JSFiddle shared by gigosa. However, I believe that the problem reported has to do with the problem I'm facing, which is:

If $state.complete() is called after the first set of items is added to the container, the scroll position stays at the top, as things were added at the bottom.

This JSFiddle illustrate this: https://jsfiddle.net/diogopedrosa/4p7yv8r3/1/

What I was expecting was to see the scroll knob at the bottom, with the items inserted at the top of the container.