To source

a-scroll

A scroll container that remembers and restores its scroll position across page navigations.

The a-scroll element is a scroll container that automatically persists and restores its scroll position. This is particularly useful for maintaining scroll state during client-side navigation, page refreshes, or when returning to a previously visited section.

Scroll down and navigate away — when you return, the scroll position will be restored.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco.

Duis aute irure dolor in reprehenderit in voluptate velit.

Excepteur sint occaecat cupidatat non proident.

Sunt in culpa qui officia deserunt mollit anim id est laborum.

Curabitur pretium tincidunt lacus.

Nulla gravida orci a odio.

Nullam varius, turpis et commodo pharetra.

Usage

Basic Usage

Wrap your scrollable content in an a-scroll element:

<a-scroll class="h-[400px] overflow-auto">
  <div class="content">
    <!-- Long scrollable content -->
  </div>
</a-scroll>

With Unique Identifier

For pages with multiple scroll containers, use a unique id to distinguish them:

<a-scroll id="sidebar-scroll" class="h-screen overflow-auto">
  <nav>
    <!-- Navigation items -->
  </nav>
</a-scroll>

<a-scroll id="main-content" class="h-screen overflow-auto">
  <main>
    <!-- Main content -->
  </main>
</a-scroll>

ScrollElement

A scroll-container that can remember its scroll position throughout navigations.

Example

<a-scroll>
  <div class="sidebar-content sl-flex">
    <slot name="sidebar" />
  </div>
</a-scroll>

Attributes

Name Type Default value Description
id string ""

The unique name of the scroll container. Fallback is className + className of the parent element.
strategy "session" | "history" "session"

Strategy to use for storing the scroll position, can be "session" or "history"

References