Quick Example

useInfiniteScroll Usage

ตัวอย่าง import และการใช้งานแบบสั้นสำหรับหน้า `use-infinite-scroll`

Code

                <script lang="ts">
 import { useInfiniteScroll } from 'svelora';

 const loadMore = () => {
  console.log('load more');
 };
</script>

<div use:useInfiniteScroll={{ onLoadMore: loadMore }}>
 Scroll to load more
</div>
            

useInfiniteScroll

Reactive infinite scroll hook with Svelte action. Triggers a callback when the user scrolls near the bottom of a container.

Basic

Scroll down inside the container to load more items. Stops at 100 items.

Items: 20 Loads: 0 Has more
Item 1 #1
Item 2 #2
Item 3 #3
Item 4 #4
Item 5 #5
Item 6 #6
Item 7 #7
Item 8 #8
Item 9 #9
Item 10 #10
Item 11 #11
Item 12 #12
Item 13 #13
Item 14 #14
Item 15 #15
Item 16 #16
Item 17 #17
Item 18 #18
Item 19 #19
Item 20 #20

Table + Infinite Scroll

Combine with the Table component for paginated data loading. Scroll the table to automatically load more rows. Stops at 150 users.

Users: 30 Loads: 0 Has more
# Email Role Status
1Bob Johnsonbob.johnson1@example.com Editor inactive
2Charlie Johnsoncharlie.johnson2@example.com Viewer pending
3Diana Johnsondiana.johnson3@example.com Moderator active
4Eve Johnsoneve.johnson4@example.com Admin inactive
5Frank Johnsonfrank.johnson5@example.com Editor pending
6Grace Johnsongrace.johnson6@example.com Viewer active
7Henry Johnsonhenry.johnson7@example.com Moderator inactive
8Iris Johnsoniris.johnson8@example.com Admin pending
9Jack Johnsonjack.johnson9@example.com Editor active
10Alice Smithalice.smith10@example.com Viewer inactive
11Bob Smithbob.smith11@example.com Moderator pending
12Charlie Smithcharlie.smith12@example.com Admin active
13Diana Smithdiana.smith13@example.com Editor inactive
14Eve Smitheve.smith14@example.com Viewer pending
15Frank Smithfrank.smith15@example.com Moderator active
16Grace Smithgrace.smith16@example.com Admin inactive
17Henry Smithhenry.smith17@example.com Editor pending
18Iris Smithiris.smith18@example.com Viewer active
19Jack Smithjack.smith19@example.com Moderator inactive
20Alice Brownalice.brown20@example.com Admin pending
21Bob Brownbob.brown21@example.com Editor active
22Charlie Browncharlie.brown22@example.com Viewer inactive
23Diana Browndiana.brown23@example.com Moderator pending
24Eve Browneve.brown24@example.com Admin active
25Frank Brownfrank.brown25@example.com Editor inactive
26Grace Browngrace.brown26@example.com Viewer pending
27Henry Brownhenry.brown27@example.com Moderator active
28Iris Browniris.brown28@example.com Admin inactive
29Jack Brownjack.brown29@example.com Editor pending
30Alice Princealice.prince30@example.com Viewer active