ClassicSidebar Layout

Scroll Restore – oo.scrollRestore

oo.scrollRestore.startTracking(selector) speichert laufend (debounced) die Scroll-Position eines Container-Elements in sessionStorage. oo.scrollRestore.restore(selector) stellt sie nach einer Navigation wieder her – über requestAnimationFrame, damit der Inhalt bereits gerendert ist.

Scrollbarer Container mit Tracking

Scrolle innerhalb des Containers, navigiere dann zu einer anderen Demo und komme zurück – die Position wird automatisch wiederhergestellt.

Zeile 1 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 2 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 3 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 4 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 5 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 6 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 7 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 8 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 9 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 10 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 11 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 12 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 13 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 14 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 15 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 16 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 17 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 18 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 19 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 20 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 21 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 22 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 23 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 24 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 25 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 26 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 27 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 28 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 29 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 30 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 31 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 32 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 33 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 34 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 35 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 36 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 37 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 38 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 39 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Zeile 40 – Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Status: Tracking aktiv – scrolle im Container, dann navigiere weg und zurück.

Wie es im AppShell-Layout eingesetzt wird

Typischer Aufruf in einem Layout-Component.

Rejoining the server...

Rejoin failed... trying again in seconds.

Failed to rejoin.
Please retry or reload the page.

The session has been paused by the server.

Failed to resume the session.
Please retry or reload the page.