component · pagination
TuxInfiniteScroll
IntersectionObserver. The aggressive end of pagination — use for feeds (news, conversation history, image galleries) where the user is in a scanning rhythm. Three real trade-offs vs TuxLoadMore (SEO, footer visibility, keyboard nav) — see the JSDoc. Honors
prefers-reduced-motion automatically — for users with reduced-motion, the component renders an explicit button instead of auto-fetching. keyboardFallback forces the button on for any surface where keyboard reachability matters. flagship · live demo
Scroll to load more
Scroll the demo below — when the sentinel enters the viewport, the component auto-fetches 12 more items. After 60 items, the terminal state appears.
#01
Item 01
An entry in a scrollable feed. Real surfaces would render actual content here.
#02
Item 02
An entry in a scrollable feed. Real surfaces would render actual content here.
#03
Item 03
An entry in a scrollable feed. Real surfaces would render actual content here.
#04
Item 04
An entry in a scrollable feed. Real surfaces would render actual content here.
#05
Item 05
An entry in a scrollable feed. Real surfaces would render actual content here.
#06
Item 06
An entry in a scrollable feed. Real surfaces would render actual content here.
#07
Item 07
An entry in a scrollable feed. Real surfaces would render actual content here.
#08
Item 08
An entry in a scrollable feed. Real surfaces would render actual content here.
#09
Item 09
An entry in a scrollable feed. Real surfaces would render actual content here.
#10
Item 10
An entry in a scrollable feed. Real surfaces would render actual content here.
#11
Item 11
An entry in a scrollable feed. Real surfaces would render actual content here.
#12
Item 12
An entry in a scrollable feed. Real surfaces would render actual content here.
<tux-infinite-scroll
:loaded="items.length"
:total="412"
:loading="fetching"
@load="fetchNext"
/>accessibility · keyboard fallback
Explicit button mode
Pass keyboardFallback when keyboard reachability matters (forms, documents, admin surfaces). The component renders a "Load more" button instead of an observer-only sentinel, so keyboard users can advance the list with Enter.
<tux-infinite-scroll
:loaded="items.length"
:total="412"
:loading="fetching"
keyboard-fallback
@load="fetchNext"
/>