+ Inertia's infinite scroll feature loads additional pages of content as users scroll, replacing traditional + pagination controls. This is great for applications like chat interfaces, social feeds, photo grids, and product + listings. +
+ +
+ To configure your paginated data for infinite scrolling, you should use the Inertia::scroll() method
+ when returning your response. This method automatically configures the proper merge behavior and normalizes
+ pagination metadata for the frontend component.
+
+ The Inertia::scroll() method works with Laravel's paginate(),{' '}
+ simplePaginate(), and cursorPaginate() methods, as well as pagination data wrapped in{' '}
+ Eloquent API resources. For more details, check out
+ the Inertia::scroll() method documentation.
+
+ On the client side, Inertia provides the {' component to automatically load
+ additional pages of content. The component accepts a data prop that specifies the key of the prop
+ containing your paginated data. The {' component should wrap the content that
+ depends on the paginated data.
+
+ The component uses{' '} + + intersection observers + {' '} + to detect when users scroll near the end of the content and automatically triggers requests to load the next + page. New data is merged with existing content rather than replacing it. +
++ You can control how early content begins loading by setting a buffer distance. The buffer specifies how many + pixels before the end of the content loading should begin. +
++ In the example above, content will start loading 500 pixels before reaching the end of the current content. A + larger buffer loads content earlier but potentially loads content that users may never see. +
+
+ The infinite scroll component updates the browser URL's query string (?page=...) as users scroll
+ through content. The URL reflects which page has the most visible items on screen, updating in both directions
+ as users scroll up or down. This allows users to bookmark or share links to specific pages. You can disable this
+ behavior to maintain the original page URL.
+
+ This is useful when infinite scroll is used for secondary content that shouldn't affect the main page URL, such + as comments on a blog post or related products on a product page. +
+
+ The infinite scroll component loads content in both directions when you scroll near the start or end. You can
+ control this behavior using the only-next and only-previous props.
+
+ The default option is particularly useful when users start on a middle page and need to scroll in both + directions to access all content. +
++ For chat applications, timelines, or interfaces where content is sorted descendingly (newest items at the bottom), you + can enable reverse mode. This configures the component to load older content when scrolling upward. +
++ In reverse mode, the component flips the loading directions so that scrolling up loads the next page (older + content) and scrolling down loads the previous page (newer content). The component handles the loading + positioning, but you are responsible for reversing your content to display in the correct order. +
+
+ Reverse mode also enables automatic scrolling to the bottom on initial load, which you can disable with{' '}
+ :auto-scroll="false".
+
+ Manual mode disables automatic loading when scrolling and allows you to control when content loads through the{' '}
+ next and previous slots. For more details about available slot properties and
+ customization options, see the Slots documentation.
+
+ You can also configure the component to automatically switch to manual mode after a certain number of pages
+ using the manualAfter prop.
+
+ The infinite scroll component provides several slots to customize the loading experience. These slots allow you + to display custom loading indicators and create manual load controls. Each slot receives properties that provide + loading state information and functions to trigger content loading. +
+The main content area where you render your data items. This slot receives loading state information.
+
+ The loading slot is used as a fallback when loading content and no custom before or{' '}
+ after slots are provided. This creates a default loading indicator.
+
+ The previous and next slots are rendered above and below the main content, typically
+ used for manual load controls. These slots receive several properties including loading states, fetch functions,
+ and mode indicators.
+
+ The loading, previous, and next slots receive the following properties:
+
loading - Whether the slot is currently loading content
+ loadingPrevious - Whether previous content is loading
+ loadingNext - Whether next content is loading
+ fetch - Function to trigger loading for the slot
+ hasMore - Whether more content is available for the slot
+ hasPrevious - Whether more previous content is available
+ hasNext - Whether more next content is available
+ manualMode - Whether manual mode is active
+ autoMode - Whether automatic loading is active
+
+ The
+ The infinite scroll component automatically tracks content and assigns page numbers to elements for{' '}
+ URL synchronization. When your data items are not direct children of the
+ component's root element, you need to specify which element contains the actual data items using the{' '}
+
+ In this example, the component monitors the
+ You can also specify custom trigger elements for loading more content using CSS selectors. This prevents the
+ default trigger elements from being rendered and uses intersection observers on your custom elements instead.
+
+ Alternatively, you can use template refs instead of CSS selectors. This avoids adding HTML attributes and
+ provides direct element references.
+
+ The infinite scroll component works within any scrollable container, not just the main document. The component
+ automatically adapts to use the custom scroll container for trigger detection and calculations instead of the
+ main document scroll.
+ When you need to trigger loading actions programmatically, you may use a template ref. The component exposes the following methods:
+ The
+ If you don't use Laravel's paginator or use a different transformation layer, you may use the additional
+ arguments that
+ The metadata parameter accepts an instance of You may then use this custom metadata provider in your scroll function. To avoid repeating this setup in multiple controllers, you may define a macro.InfiniteScroll component renders as a {'as prop.
+
+ Element targeting
+ itemsElement prop.
+
+
+
+
+ `,
+ },
+ {
+ name: 'React',
+ language: 'jsx',
+ code: dedent`
+ Name
+
+
+ {{ user.name }}
+
+
+
+ Name
+
+ ))}
+
+ {user.name}
+
+
+
+ Name
+
+ {/each}
+
+ {user.name}
+ #table-body element and automatically
+ tags each {''}{' '} with a page number as new content loads. This enables
+ proper URL updates based on which page's content is most visible in the viewport.
+
+
+
+
+
+ `,
+ },
+ {
+ name: 'React',
+ language: 'jsx',
+ code: dedent`
+ Name
+
+
+
+ {{ user.name }}
+ Footer
+
+
+ Name
+
+ ))}
+
+
+ {user.name}
+ Footer
+
+
+ Name
+
+ {/each}
+
+
+ {user.name}
+ Footer
+
+
+ Name
+
+
+
+ {{ user.name }}
+ Footer
+
+
+ Name
+
+ ))}
+
+
+ {user.name}
+ Footer
+
+
+ Name
+
+ {/each}
+
+
+ {user.name}
+ Footer Scroll containers
+ Programmatic access
+
+
+
+ fetchNext() - Manually fetch the next page
+ fetchPrevious() - Manually fetch the previous page
+ hasNext() - Whether there is a next page
+ hasPrevious() - Whether there is a previous page
+ Inertia::scroll() method
+ Inertia::scroll() method provides server-side configuration for infinite scrolling. It
+ automatically configures the proper merge behavior so that new data is appended or prepended to existing content
+ instead of replacing it, and normalizes pagination metadata for the frontend component.
+ scroll() accepts.
+ ProvidesScrollMetadata or a callback that returns
+ such an instance. The callback receives the $data parameter. This is useful when integrating with
+ third-party pagination libraries like Fractal.
+