bcb412e48d
Add comprehensive Claude Code tooling: - Agents: docs-researcher, docs-researcher-advanced for documentation research - Commands: dev:add-e2e-attrs, docs:library, docs:refresh-reference, quality:bundle-analyze, quality:coverage - Skills: 8 specialized skills including api-change-analyzer, architecture-enforcer, library-scaffolder, and more Update documentation: - Comprehensive CLAUDE.md overhaul with library reference system - Update testing guidelines in docs/guidelines/testing.md - Update READMEs for checkout, icons, scanner, and scroll-position libraries Remove outdated checkout-completion-flow-documentation.md Update .gitignore for Claude Code files
2.4 KiB
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:
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>