mirror of
https://github.com/YuzuZensai/VRC-Circle.git
synced 2026-09-13 19:08:52 +00:00
✨ feat: restore scroll position across navigation
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
import { Fragment, useEffect, useState } from "react";
|
import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
|
||||||
import {
|
import {
|
||||||
ArrowLeft,
|
ArrowLeft,
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
@@ -140,6 +140,14 @@ function Shell() {
|
|||||||
? `${nav.current.kind}:${nav.current.id}`
|
? `${nav.current.kind}:${nav.current.id}`
|
||||||
: nav.current.kind;
|
: nav.current.kind;
|
||||||
|
|
||||||
|
const stageRef = useRef<HTMLElement>(null);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
const el = stageRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
const saved = nav.getViewState(`scroll:${stageKey}`);
|
||||||
|
el.scrollTop = typeof saved === "number" ? saved : 0;
|
||||||
|
}, [stageKey, nav]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="shell">
|
<div className="shell">
|
||||||
<header className="topbar">
|
<header className="topbar">
|
||||||
@@ -194,7 +202,11 @@ function Shell() {
|
|||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
<main className="stage">
|
<main
|
||||||
|
className="stage"
|
||||||
|
ref={stageRef}
|
||||||
|
onScroll={(e) => nav.setViewState(`scroll:${stageKey}`, e.currentTarget.scrollTop)}
|
||||||
|
>
|
||||||
{nav.canBack ? (
|
{nav.canBack ? (
|
||||||
<button onClick={nav.back} className="stage__back" aria-label="Go back">
|
<button onClick={nav.back} className="stage__back" aria-label="Go back">
|
||||||
<ArrowLeft size={16} /> Back
|
<ArrowLeft size={16} /> Back
|
||||||
|
|||||||
Reference in New Issue
Block a user