GLUON / DOCS Playground

@gluonjs/router

@gluonjs/router / packages/router/src / ScrollPosition

Interface: ScrollPosition

Properties

left

readonly left: number

top

readonly top: number

Example

Capture horizontal and vertical scroll coordinates for restoration when history traversal returns to an earlier entry:

ts
import {
  createMemoryHistory,
  createWebHashHistory,
  createWebHistory,
  type HistoryListener,
  type HistoryLocation,
  type HistoryNavigation,
  type HistoryState,
  type RouterHistory,
  type ScrollPosition,
} from '@gluonjs/router';

const state = { source: 'catalog' } satisfies HistoryState;
const scroll = { left: 0, top: 640 } satisfies ScrollPosition;
const history: RouterHistory = createMemoryHistory(['/shop', '/products/42']);
const listener: HistoryListener = (to: HistoryLocation, from: HistoryLocation, navigation: HistoryNavigation) => {
  console.log(`${navigation.direction}: ${from.location} -> ${to.location}`, navigation.savedPosition);
};
const stop = history.listen(listener);
history.replace('/products/42?variant=blue', state);
history.saveScroll(scroll);
history.push('/bag');
history.go(-1);

const webHistory = createWebHistory('/shop');
const hashHistory = createWebHashHistory('/preview');
console.log(history.location, webHistory.createHref('/bag'), hashHistory.createHref('/bag'));
stop();
history.destroy();
webHistory.destroy();
hashHistory.destroy();