Scroll management

Scroll resetting

When navigating between pages, Inertia mimics default browser behaviour by automatically resetting the scroll position of the document body (as well as any scroll regions you've defined), back to the top. Further, Inertia keeps track of the scroll position of each page and automatically restores that scroll position as you navigate forward and back in history.

Scroll preservation

Sometimes it's desirable to prevent the default scroll resetting when making visits. You can disable this behaviour using the preserveScroll option when manually making visits.

Inertia.visit(url, { preserveScroll: true })

This is also possible with Inertia links using the preserve-scroll attribute.

<inertia-link href="/" preserve-scroll>Home</inertia-link>
The <inertia-link> component is automatically registered by the Inertia plugin.

Scroll regions

If your app doesn't use document body scrolling, but instead has scrollable elements (using the overflow CSS property), scroll resetting will not work. In these situations you must tell Inertia which scrollable elements to manage by adding a scroll-region attribute.

<div class="overflow-y-auto" scroll-region>
  <!-- Your page content -->
</div>