fix(useInfiniteScroll): improve visibility check

[erikkkwu]

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

⚠️ Slowing down new functions

Warning: Slowing down new functions

As the VueUse audience continues to grow, we have been inundated with an overwhelming number of feature requests and pull requests. As a result, maintaining the project has become increasingly challenging and has stretched our capacity to its limits. As such, in the near future, we may need to slow down our acceptance of new features and prioritize the stability and quality of existing functions. Please note that new features for VueUse may not be accepted at this time. If you have any new ideas, we suggest that you first incorporate them into your own codebase, iterate on them to suit your needs, and assess their generalizability. If you strongly believe that your ideas are beneficial to the community, you may submit a pull request along with your use cases, and we would be happy to review and discuss them. Thank you for your understanding.

---

Description

adjust element offsetParent check to fix useInfiniteScroll broken on v10.2.1 #3201

Additional context

---

🤖 Generated by Copilot at 0181645

Fixed a bug in useInfiniteScroll that caused excessive data loading for some elements. Changed the hidden element detection logic to use el.offsetParent === null instead of !el.offsetParent.

🤖 Generated by Copilot at 0181645

• Fix the condition for checking if the element is hidden to use el.offsetParent === null instead of !el.offsetParent (link). This prevents unnecessary loading of data when the element is not hidden but has a falsy offsetParent, such as when the element is fixed or the offset parent is the root element. This change affects the file packages/core/useInfiniteScroll/index.ts.

[Gruce]

I think the problem still exists.

[erikkkwu]

I think the problem still exists.

hello @Gruce can you describe your test case?
#3201 The case reported by the user is because the document doesn't has offsetParent

[genu]

This fails when el is a document instance.

We need to check if el is a instance of HTMLDocument first, instead of assuming its an HTMLElement

[erikkkwu]

I discovered that although the approach of determining the element offsetParent solves the issue of an infinite loop when v-show is false #3143, it also results in the load more functionality not working when v-show is switched to true. The solution I came up with is to use MutationObserver to listen for changes and trigger the load more. do you have any better suggestions?

[genu]

I need to review the code more, but I think the issue in #3143 needs to be solved in a different way.

The changes that were made by @antfu coerces the element to be an HTMLElement:

const el = toValue(element) as HTMLElement
    if (!el || !el.offsetParent)
      return

This is not correct because the function definition itself tells us that element could take 4 different shapes:

export function useInfiniteScroll(
  element: MaybeRefOrGetter<HTMLElement | SVGElement | Window | Document | null | undefined>,
...
) 

coincidentally only HTMLElemewnt has an offsetParent

Pinging @antfu for feedback.

[antfu]

I am not very familiar with this, but I guess we could do !el || (('offsetParent' in el) && !el.offsetParent)?

[erikkkwu]

yes can, but it will have another problem that load more callback will not trigger when the v-show from false to true

[genu]

My recommendation is to re-open that issue and revert the fix that was made because It had caused a regression. Then we can move the discussion on how to fix it there or another PR.

[francoism90]

@genu Any update on this? :)

If I understand correctly, you just need a PR that reverts the offsetParent check?

[genu]

This PR was updated and I reviewed again. In my testing, everything looks good now.

[erikkkwu]

hi genu , I've switched to using the IntersectionObserver to check if the element is visible as a fix for this issue. I've also added some tests. please review them and let me know if you have any suggestions for improvement. thanks

[rashidpathiyil]

Hope this fix will live soon 🫂

[genu]

Thanks @erikkkwu I tested the PR on my local and it seems to be good now -- particularly the handling of Window and Document.

Should be all good now 🎉

💯 for the extra tests!

[genu]

LGTM

[erikkkwu]

sorry, I accidentally hit the review request.😱