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

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:

Go to 'the CodeSandbox page'
Scroll down sufficiently so that additional pages should start loading in
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

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:

vue-virtual-scroll-grid/src/utilites.ts

Lines 42 to 56 in d586fb2

    
           export function fromWindowScroll(elRef: MaybeElementRef): Observable<Element> { 
        
             return fromEvent( 
        
               window, 
        
               "scroll", 
        
               { 
        
                 passive: true, 
        
                 capture: true, 
        
               }, 
        
               () => unrefElement(elRef) 
        
             ).pipe( 
        
               filter<Element | undefined | null, Element>((el): el is Element => 
        
                 Boolean(el) 
        
               ) 
        
             ); 
        
           }

)

I'll investigate it later.

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

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.

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

	export function fromWindowScroll(elRef: MaybeElementRef): Observable<Element> {
	return fromEvent(
	window,
	"scroll",
	{
	passive: true,
	capture: true,
	},
	() => unrefElement(elRef)
	).pipe(
	filter<Element \| undefined \| null, Element>((el): el is Element =>
	Boolean(el)
	)
	);
	}