vueuse: useInfiniteScroll v10 behavior differs from v9 - Scrolling to the edge triggers an infinite event.

I’m seeing this issue as well, see repro here

Going to look into this and see if I can find the problem

Update: This appears to be caused by arrivedState[direction] never being flipped back to false, which leads to the infinite loop. The reason it’s never being set to false is because the handler to do that is only bound to a scroll event, which is not fired when the dom resizes.

https://github.com/vueuse/vueuse/blob/81bcaa9d99bece266bc4351af3aa5147eda0020b/packages/core/useScroll/index.ts#L163-L223

You’ll notice that any scrolling in the container stops the cycle. I think we have a couple options for fixing this, I’ll play with them a bit and post my findings…

Update 2: Here is a potential fix, let me know if this helps you guys! https://github.com/vueuse/vueuse/pull/3030

@antfu we can close this

@sondh0127 @JJBocanegra it’s because the version of vueuse you are using is not the latest. The latest vueuse/core does not have this problem:

vueDemi.watch(() => state.arrivedState[direction], async (v) => {
    var _a2, _b2;
    if (v) {
      const elem = shared.toValue(element);
      const previous = {
        height: (_a2 = elem == null ? void 0 : elem.scrollHeight) != null ? _a2 : 0,
        width: (_b2 = elem == null ? void 0 : elem.scrollWidth) != null ? _b2 : 0
      };
      await onLoadMore(state);
      if (options.preserveScrollPosition && elem) {
        vueDemi.nextTick(() => {
          elem.scrollTo({
            top: elem.scrollHeight - previous.height,
            left: elem.scrollWidth - previous.width
          });
        });
      }
    }
  });

the old version which has problem:

vueDemi.watch(
   () => [state.arrivedState[direction], shared.toValue(element)],
   checkAndLoad,
   { immediate: true }
 );

you can check the @vueuse/core in your node_modules

@scottbedard I’m wondering if it’s expected that when we reach the end (i.e. nothing else to load), the onLoadMore() handler is (still) called infinitely every 100ms?