SmoothScrollService

Overview

SmoothScrollService — Lenis-inspired smooth scroll for Angular.

Desktop: intercepts wheel events → lerp interpolation → synthetic scrollTop. Mobile: listens to native touch scroll → lerp interpolation → synthetic scrollTop. Native scroll is prevented during touch to avoid the vibration conflict.

The scrollY signal is updated on every RAF tick and can be consumed by MoveScrollDirective (or any other consumer) to react to smooth scroll position without relying on the native scroll event (which is NOT fired during smooth scroll).

Usage (in app root or a layout service):

constructor() { inject(SmoothScrollService).init(); }

Experimental API — may change significantly between minor versions.

• Kind: Service
• Provided in: root
• Stability: experimental

Properties

Name	Type	Description
readonly scrollY	WritableSignal<number>	Reactive scroll position (in pixels) updated on every RAF tick. Use this signal instead of listening to window.scroll when smooth scroll is active, since native scroll events are NOT fired during lerp-based scrolling.
readonly isActive	boolean	Whether the service is currently active (i.e. init() has been called).
readonly activeElement	HTMLElement | null	The element the service is currently driving, or null when inactive.

Public methods

init

init(options?: { lerp?: number; element?: HTMLElement; }): void

Parameter	Type	Optional	Description
options	{ lerp?: number; element?: HTMLElement }	Yes

destroy

destroy(): void

scrollTo

scrollTo(y: number, instant?: boolean): void

Scroll programmatically to a Y position

Parameter	Type	Optional	Description
y	number
instant	boolean	Yes