Clear and concise description of the problem

Lets say we have a website that shows a list of products. When scrolling the document, new products should be loaded before reaching the end of the products wrapper.

Currently this doesnt seem to be possible with useInfiniteScroll: It can only be used with a scrollable html element. Of course we can use document as the element but it will not load new products before reaching the end of the products wrapper, but instead before reaching the end of the document (which probably includes footer and other stuff below the products wrapper).

The following shows the problem:
https://stackblitz.com/edit/vitejs-vite-5xmosl1v?file=src%2FApp.vue

Suggested solution

One solution might be to add a second prop to useInfiniteScroll that is the element to check for the end-position. One could then use document as el and additionally set the products wrapper and useInfiniteScroll could then check if distance betweend document scroll and end of wrapper element is reached.

Another solution might be to place a trigger component at the end of the products list, that will be used for checking the distance.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.