vueuse: useInfiniteScroll - broken on v10.2.1

Describe the bug

I use this to scroll on the body:

useInfiniteScroll(document, fetch, {
  distance: 10
})

However upgrading to v10.2.1, it doesn’t seem to work anymore. Downgrading to v10.2.0 fixes the issue.

I think this is the cause: https://github.com/vueuse/vueuse/pull/3143

Reproduction

https://stackblitz.com/edit/vitejs-vite-zf9drc

System Info

System:
    OS: Linux 6.3 Alpine Linux
    CPU: (16) x64 AMD Ryzen 7 5700G with Radeon Graphics
    Memory: 19.14 GB / 30.70 GB
    Container: Yes
    Shell: 1.36.0 - /bin/ash
  Binaries:
    Node: 18.16.0 - /usr/bin/node
    npm: 9.6.6 - /usr/bin/npm
  npmPackages:
    @vueuse/components: ^10.2.1 => 10.2.1 
    @vueuse/core: ^10.2.1 => 10.2.1
    @vueuse/head: ^1.1.26 => 1.1.26 
    vue: ^3.3.4 => 3.3.4

Used Package Manager

npm

Validations

Follow our Code of Conduct
Read the Contributing Guidelines.
Read the docs.
Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a VueUse issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion.
The provided reproduction is a minimal reproducible example of the bug.

About this issue

Original URL
State: open
Created a year ago
Reactions: 10
Comments: 27 (21 by maintainers)

Most upvoted comments

So I’ve moved to useScroll instead, I don’t know what happend to useInfiniteScroll, but it just doesn’t work anymore.

It’s a bit ugly, but it also brings some new features:

const { arrivedState } = useScroll(document, {
  throttle: 100,
  behavior: 'smooth'
})

onMounted(() => initialize())
watch(arrivedState, (state) => (state.bottom ? fetch() : null))

francoism90 on Aug 1, 2023

I’ve tried the latest version with window/document it’s broken for me also. When I downgrade to 10.2.0 it works.

gazben on Aug 23, 2023

@genu It’s not the style, I tried multiple things, like applying overflow, removing overflow, change heights, use it on different elements… but it’s the window/document that is broken.

francoism90 on Aug 19, 2023

@erikkkwu I’ve had a hard time creating a minimal reproduction, as I can only see the problem in a private project.

After some further debugging, I’m starting to think that in fact, there isn’t a bug in the useInifiniteScroll but rather issues can arise when css or certain styles cause the height of the elements being observed to be wrong.

For example, in my case, the rendered height of the <html> and <body> were not the full height of the scroll area.

Notice in the screenshot below: Upon scrolling down, the html height is not longer the full height.

CleanShot 2023-08-07 at 14 35 11

@francoism90 Maybe check the styles of the elements involved.

genu on Aug 7, 2023

@erikkkwu I think there is still an issue when working with Window and Document

Here, we state that Document and Window cannot be observed by IntersectionObserver, but it seems that useElementVisibility is using IntersectionObserver under the hood.

In my testing I noticed that isElementVisible will always be false when el is a Document instance.

https://github.com/vueuse/vueuse/blob/028a732333ea6792a984f39c18f1fdad8b0587bd/packages/core/useInfiniteScroll/index.ts#L60-L72

Can we bypass the whole visibility check for Document and Window? Are there any cases when visibility for those matter?

genu on Aug 7, 2023

@erikkkwu I’m using Vue3 composables, like this:

const state = reactive(<BookState>{
  data: new Array(),
})

export function useBooks() {
  // initialize
  // fetch
  // reset
  // ..
}

It works fine when using useScroll, and it worked fine on 10.2.0.

It’s really weird, it does call fetch (method used to merge next page results), but only once. Not only that, but it also seems to call it random, like before the actual component render and sometimes after. I’m using async components. I would expect it only calls fetch when actually scrolling to the bottom of the page.

francoism90 on Aug 1, 2023

@erikkkwu It simply doesn’t call anything. I tried Firefox and Brave, they don’t call ‘fetch’ (or anything else) when reaching the button of the page.

It does work fine on [v10.2.0](https://github.com/vueuse/vueuse/releases/tag/v10.2.0) (and previous versions). so I don’t think it’s the observer.

francoism90 on Jul 31, 2023