Overflow scrolling (container={true}) not working in Svelte

[showcaseearth]

Description

After trying every combination of css and option configuration I can, based on existing and past examples, I cannot seem to get requestAppend to fire within within an overscrolled container.

I cannot confirm if this is a bug or my improper setup (more likely). A more comprehensive example that involvescontainer={true} on svelte (and maybe other frameworks) would be hugely beneficial. It's currently confusing how the js-injected container div works with existing elements and how best to deconflict css handling. Thanks!

Steps to check or reproduce

This uses latest svelte-infinitegrid package and svelte versions.

My latest attempt is here: https://svelte.dev/repl/8736b43e2086454fa75b2f16b0c29148?version=3.44.2

If I remove the .parent overflow-y:auto css and set container={false} in the component config, infinite scrolling works as expected outside the container's bounds.

[showcaseearth]

I was able to use the vanilla javascript library to trigger requestAppend successfully, once wrapped in onMount. Interestingly, the .item and children css styling is not respected, but at least scrolling works. Working with js: https://svelte.dev/repl/2e6e41ebaa5e42d1bca3713269bc1c75?version=3.44.2

With the svelte component, I'm also seeing that the .container height set in the svelte file is also not respected, so maybe that explains the lack of scrolling? I'm not quite understanding the difference in these two examples, though.

[daybrush]

@showcaseearth

Oh, sorry. The css scope is not applied to the class of InfiniteGrid. Try setting the css like below.

:global(.container) {
   height: 600px;
}

[showcaseearth]

Thanks, that seems to do the trick @daybrush. Sorry if I missed something obvious here, but excited to use the library in svelte- awesome work here!