svelte-infinite-scroll

svelte-infinite-scroll copied to clipboard

For some reason I can only get this to work if I set the height of the container to a amount of px that doesn't take up the full screen 100% doesn't work 999px doesn't work etc

This is most likely a user error but is very confusing and cannot seem to Google or solve myself

<script>
	import {onMount} from "svelte";
	import InfiniteScroll from "svelte-infinite-scroll";

	// let page = 0;
	let data = [];
	let newBatch = [];

	async function fetchData() {
		const response = await fetch("https://yande.re/post.json?limit=20&tags=rating:safe");
		newBatch = await response.json();
		console.log(newBatch)
	};

	onMount(()=> {
		fetchData();
	})

	$: data = [
		...data,
    	...newBatch
  	];
	
</script>

<style>

#container {
    overflow:scroll;
	height: 300px;
}

</style>

<div id="container">
	{#each data as item}
		<img src="{item.preview_url}" alt="asdf"/>
	{/each}
  <InfiniteScroll threshold={100} on:loadMore={() => {fetchData()}}/>
</div>

Hi there,

I'm reviewing it here and I'll give you an answer soon.

I am having the same issue. A reasonable solution I found was using height: 100vh;.