Skip to content
MOTION LAB / Experimental

moveSmoothScroll

Learn more

Inertial scrolling scoped to this preview. Wheel, touch and native keyboard input stay inside the test region. The root singleton owns one container at a time and opts out under reduced motion.

01

Scroll to explore

Wheel, swipe, or use Page Down inside this canvas.

02

Native keyboard input works

Wheel, swipe, or use Page Down inside this canvas.

03

Motion follows your scroll

Wheel, swipe, or use Page Down inside this canvas.

04

You have reached the end

Wheel, swipe, or use Page Down inside this canvas.

Controls Make it yours

scrollY()

0px

Reduced motion uses native scrolling. One container owns the service; leaving this route destroys it.

scoped-container.htmlhtml
<div moveSmoothScroll [moveSmoothScrollLerp]="0.1"
     style="height: 360px; overflow-y: auto"
     tabindex="0" role="region" aria-label="Scroll preview">
  <div style="height: 1400px">Your scrollable content</div>
</div>