andrelmlins/svelte-infinite-scroll

Infinite Scroll Component to Svelte

Svelte Infinite Scroll

• • • • •

Infinite Scroll Component to Svelte.

Installation

npm i svelte-infinite-scroll

// or

yarn add svelte-infinite-scroll

Note: to use this library in Sapper applications, install as devDependency. Take a look at this link.

Demo link

Local demo:

git clone https://github.com/andrelmlins/svelte-infinite-scroll.git
cd svelte-infinite-scroll
npm install && npm run dev

Examples

An example of how to use the library:

<script>
  import InfiniteScroll from "svelte-infinite-scroll";
  import allCountries from "./countries.js";

  let page = 0;
  let size = 20;
  let countries = [];

  $: countries = [
    ...countries,
    ...allCountries.splice(size * page, size * (page + 1) - 1)
  ];
</script>

<style>
  ul {
    width: 400px;
    max-height: 400px;
    overflow-x: scroll;
  }
</style>

<ul>
  {#each countries as country}
    <li>{country.name}</li>
  {/each}
  <InfiniteScroll threshold={100} on:loadMore={() => page++} />
</ul>

Another examples

• Infinite scroll with requests | Link | Author
• Infinite scroll reverse | Link | Author

Properties

Component props:

Prop	Type	Default	Description
threshold	number	0	Threshold to call loadMore
elementScroll	node	-	Element to bind scroll
window	bool	false	Bind scroll in window
hasMore	bool	true	Tells you if there are more items to load
horizontal	bool	false	Changing orientation
reverse	bool	false	Revese scroll direction

Events

Event	Description
loadMore	Tells you if there are more items to load

NPM statistics

Download stats for this NPM package.

License

Svelte Infinite Scroll is open source software licensed as MIT.

svelte-infinite-scroll's Issues

onDestroy doesn't remove event listeners

I use the component on window and needed to rewrite onDestroy method of InfiniteScroll from:

onDestroy(() => {
    if (component || elementScroll || window) {
      const element = getElement();
      element.removeEventListener("scroll", null);
      element.removeEventListener("resize", null);
    }
  });

to:

onDestroy(() => {
    if (component || elementScroll || window) {
      const element = getElement();
      element.removeEventListener("scroll", onScroll);
      element.removeEventListener("resize", onScroll);
    }
  });

... to make it properly remove the event handler (otherwise I was getting multiple event handlers on window after going back and forth between components. I think that this version is also in line with what MDN says about how to use removeEventListener: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener

Add pagination example

Hey there! Nice work!

Could you please add a pagination example where the data is fetched and appended in batches/pages rather than have the whole dataset loaded initially? That would be super helpful. Thanks a lot!

any idea how it can work on Sapper

amazing plugin that at the moment breaks on sapper because of SSR

Can no longer bind to window, only binds to components parent.

@andrelmlins first thank you for the great work on this package. We've enjoyed using it.

It looks like window scroll binding isn't working as it used to. You have a function called getElement that used to get called to set your element that you bind your scrolling too but that function isn't getting called any longer and the element always becomes the component's parent even if you set window = true

https://github.com/andrelmlins/svelte-infinite-scroll/blob/master/src/lib/InfiniteScroll.svelte#L26

Sapper throws error 500

Hello developers,

I love this component, but when I use it in Sapper, it throws error 500.
I tried binding scroll of some element or window, unfortunately it threw "Cannot read property 'parentNode' of undefined".
I guess this is caused by Sapper which runs before DOM is rendered, so nothing like window or parentNode exists. Maybe getting those elements in onMount( () => {...} ) would help. I think you tried that (me too, but I still get some errors), because I saw unused onMount import. But if you haven't, at least I reminded you. BTW, scrolling feature doesn't work for me on mobile devices, but that is for another issue.

Best regards,
Filip Holčík.

Vite 5 vite-plugin-svelte warning: 'no exports condition for svelte'

When building with SvelteKit 2 and Vite 5:

[vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Bi-directional

Hey, i played around somewhat with your implementation to make it bi-directional. For my usecase for an event overview and based on dates making it truly infinite 😉.

Here is what i have so far, from what i've noticed is the reverse function depended on the chunk size you add when loading more. This also applies to bi-directional, scrolling to the right is smoother than scrolling back.

REPL: https://svelte.dev/repl/271ca9360f9e4f4e825d200c87d1f029?version=3.35.0

Invert scrolling direction

Thanks for the work you have done so far!

Is there a way to invert the behaviour? Say a chat, where the next messages would be loaded from the top and not the bottom. Is that possible?

Importing as a Svelte component

I noticed that there are some inconsistencies in your docs / project structure.

From package.json you have the key svelte:dist/index.svelte, but the svelte key is designed for Svelte apps to import Svelte components, so it shouldn't be looking in dist.

In the readme you suggest importing from svelte-infinite-scroll/index.svelte which doesn't exist.

So in summary I think you should be setting the svelte key in package.json to point to src/lib/index.svelte which should be called src/lib/InfiniteScroll.svelte (components should have capitalised names), and you should be recommending people use it in Svelte/Sapper apps as:

import InfiniteScroll from 'svelte-infinite-scroll'

Also, all Svelte / Sapper apps are bundled so components should always be installed as a dev dependency unless your consuming component is also a component library.

I look forward to using it!

Optional Types

Type '{ threshold: number; hasMore: boolean; elementScroll: any; }' is not assignable to type 'IntrinsicAttributes & InfiniteScrollProps'. Type '{ threshold: number; hasMore: boolean; elementScroll: any; }' is missing the following properties from type 'InfiniteScrollProps': horizontal, reverse, window

I get this TypeScript Error. But I guess some properties are optional. Can you maybe change those to be optional in the Types?

Only works when width is set [user error]

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>

How to use it with Nested routes and virtual-list

https://sapper.svelte.dev/docs#Nested_routes
https://github.com/sveltejs/svelte-virtual-list

I want to implement a function similar to Outlook Inbox.

Limit number of nodes rendered

Right now there's no node reuse going on or removal of nodes that are outside the scroll area. Isn't that a basic requirement for any infinite scroll component since performance would start to degrade drastically if hundreds or thousands of nodes remained rendered.