[BUG] Additional pages not loading in a HTML `<slot>`

[pruik]

Describe the bug We are using the virtual scroll grid in a very specific way, and it looks like the scroll events don't work; the grid only loads the initial pages, but does not load additional pages when scrolling down.

We use HTML web components, which means that a lot of the HTML is 'hidden' inside the shadowRoot. I suspect the problem is related to that.

We have one web component that renders its slotted content in a 'position: absolute' window on the screen, and placing the Grid inside that slotted content seems to cause the above issue, I have quickly hacked an example together on CodeSandbox here: https://codesandbox.io/s/vue-virtual-scroll-grid-esm-forked-h3bi9z?file=/index.html

To Reproduce Steps to reproduce the behavior:

1. Go to 'the CodeSandbox page'
2. Scroll down sufficiently so that additional pages should start loading in
3. See that the additional pages are not loaded

Expected behavior I expect the other pages to load in :)

Screenshots

Desktop (Shouldn't be relevant, but I'll add this for completeness)

• OS: Debian 11 "bullseye"
• Browser: Chrome
• Version 103.0.5060.134

[rocwang]

I haven't looked into it yet, but my hunch is the same as yours -- the position: absolute prevents the virtual grid to detect scrolling events properly.

The virtual grid listens for the scroll events on the window only at the moment. That might be the culprit:

https://github.com/rocwang/vue-virtual-scroll-grid/blob/d586fb2ba7eacba3d61e5a83e0c4bcf86b5a4334/src/utilites.ts#L42-L56)

I'll investigate it later.

[pruik]

I glanced a getScrollParents method in that same utilities.ts file; Would that work to find the right element for scrolling?

[rocwang]

Yes, position: absolute wasn't the issue, but the native web component is.

I managed to use Element.assignedSlot to find the correct parent to listen to, for scroll events in side a native web component . This fixed the issue.

Try v1.10.0 and see if it works for you.

[pruik]

This works perfectly! Thanks so much for the fast response :)