ISA-Frontend/libs/utils/scroll-position

Scroll Position Library

Overview

Provides utilities for storing, restoring, and observing scroll position across navigation or component view changes.

Features

• Store current scroll position in session storage.
• Restore saved scroll position with an optional delay.
• Observe when an element enters or leaves the viewport.

Usage

Storing Scroll Position

Call the function to save the current scroll position:

import { storeScrollPosition } from '@isa/utils/scroll-position';

storeScrollPosition();

Restoring Scroll Position

Inject the restore function and call it with an optional delay:

import { injectRestoreScrollPosition } from '@isa/utils/scroll-position';

const restorePosition = injectRestoreScrollPosition();
await restorePosition(200);

Automatic Restoration

Provide environment initializer in your app module to auto-save scroll positions:

import { provideScrollPositionRestoration } from '@isa/utils/scroll-position';

provideScrollPositionRestoration();

Marking a Route for Auto Restoration

To enable automatic scroll restoration on a specific route, add the “scrollPositionRestoration” property in its data:

{
  path: 'example',
  component: ExampleComponent,
  data: {
    scrollPositionRestoration: true
  }
},

Detecting Element Visibility

Apply the directive to a component template to emit true or false when entering or exiting the viewport:

<div utilScrolledIntoViewport (utilScrolledIntoViewport)="onVisibilityChange($event)">...</div>