# Scroll Position Library

## Overview

The `@isa/utils/scroll-position` library provides a comprehensive set of utilities for managing scroll position persistence and viewport visibility detection across route navigation and component lifecycle changes. It enables seamless user experience by automatically preserving and restoring scroll positions when users navigate between views, particularly useful in list/detail navigation patterns.

**Key Features:**
- **Automatic Scroll Restoration**: Preserve and restore scroll position across route navigation
- **Session Storage Integration**: Persists scroll positions in session storage for reliability
- **Route-Level Control**: Enable/disable restoration per route via route data configuration
- **Viewport Detection**: Observe when elements enter or leave the viewport for lazy loading and infinite scroll
- **Configurable Delays**: Control timing of scroll restoration with optional delays

**Type:** Utility library with functions, injectables, and directives

## 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:

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

storeScrollPosition();
```

### Restoring Scroll Position

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

```typescript
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:

```typescript
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:

```typescript
{
  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:

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