MoveSmoothScrollDirective

Overview

Directive that enables smooth scrolling on a specific scrollable container.

Supports both mouse wheel (desktop) and touch scroll (mobile) with momentum-based inertia after finger lift, similar to Lenis.

⚠️ SmoothScrollService is a root singleton. Do NOT use this directive on multiple elements simultaneously — use it once on the page root or inject the service directly where needed.

Usage: <div moveSmoothScroll [moveSmoothScrollLerp]="0.08" style="overflow-y: auto; height: 100vh"> ...content... </div>

Or use the service directly (e.g. on documentElement): constructor() { inject(SmoothScrollService).init({ lerp: 0.1 }); }

Experimental API — may change significantly between minor versions.

• Kind: Directive
• Stability: experimental

Selector

[moveSmoothScroll]

Inputs

Input	Type	Default	Required	Description
moveSmoothScrollLerp	unknown	0.1		Lerp factor passed to SmoothScrollService. Lower = smoother. Range: 0–1. Transform numberAttribute; reads as number.