Skip to content

Make smart scroll manager scroll position restoration more stable #160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Jyrno42 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Make smart scroll manager scroll position restoration more stable #160

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 17 additions & 10 deletions packages/view/src/ScrollManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { getSessionStorage, windowPageOffset, windowScroll } from './Window';
interface Snapshot {
locationUpdate?: boolean;
prevKey?: string;
prevPos: number[];
}

type Props = NamedRouteConfigComponentProps;
Expand Down Expand Up @@ -43,6 +44,7 @@ class SmartScrollToTopBase extends Component<Props, never, Snapshot> {
return {
locationUpdate: true,
prevKey: prevProps.location.key,
prevPos: windowPageOffset(),
};
}

Expand All @@ -51,10 +53,10 @@ class SmartScrollToTopBase extends Component<Props, never, Snapshot> {

public componentDidUpdate(_: never, _1: never, snapshot: Snapshot) {
if (snapshot !== null) {
const { locationUpdate, prevKey } = snapshot;
const { locationUpdate, prevKey, prevPos } = snapshot;

if (locationUpdate) {
this.rememberScrollPosition(prevKey);
this.rememberScrollPosition(prevKey, prevPos);
this.restoreScrollPosition();
}
}
Expand All @@ -79,6 +81,9 @@ class SmartScrollToTopBase extends Component<Props, never, Snapshot> {
(action === 'PUSH' &&
((state as unknown) as any)?.['$restoreScroll']);

let x = 0;
let y = 0;

// POP means user is going forward or backward in history (e.g. via back and forward buttons)
// Lets restore previous scroll position.
if (shouldRestore) {
Expand All @@ -88,8 +93,8 @@ class SmartScrollToTopBase extends Component<Props, never, Snapshot> {

const [posX, posY] = pos.split(';');

let x = parseInt(posX, 10);
let y = parseInt(posY, 10);
x = parseInt(posX, 10);
y = parseInt(posY, 10);

if (Number.isNaN(x)) {
x = 0;
Expand All @@ -98,16 +103,18 @@ class SmartScrollToTopBase extends Component<Props, never, Snapshot> {
if (Number.isNaN(y)) {
y = 0;
}

windowScroll(x, y);
} else {
setTimeout(() => windowScroll(0, 0, null), 5);
}

// Scroll to the specified position
setTimeout(() => windowScroll(x, y, null), 60);
}

protected rememberScrollPosition(key: string | undefined) {
protected rememberScrollPosition(
key: string | undefined,
prevPos?: number[]
) {
// Remember scroll position so we can restore if we return to this view via browser history (back/forward btn)
const [x, y] = windowPageOffset();
const [x, y] = prevPos || windowPageOffset();

this.sessionStorage.setItem(
`View.scrollPositions.${key || 'root'}`,
Expand Down