Mobile Scroll Physics: Rubber-Band Overscroll & Momentum (2D)

Scroll State

State: Idle

Velocity

0 px/s

Overscroll

0 px

Scroll pos

0 / 0 px

Rubber-band

55%

Physics Controls

Rubber-band constant c 0.55

Deceleration rate 0.998 (Normal)

Spring stiffness k 90

Rubber-band enabled (off = hard stop)

How it works

Drag the card list up or down and release — this is the exact two-regime model behind iOS/Android scroll views, rendered here on a flat 2D canvas.

1. In-bounds momentum (friction decay). After release the list keeps moving and loses speed exponentially every millisecond:

v(t) = v0 · r^(1000·t)   (r = deceleration rate, ≈0.998 "Normal", 0.99 "Fast")
pos(t+dt) = pos(t) + v(t)·dt

2. Rubber-band resistance at the edges. Once the raw scroll position crosses the top (0) or bottom (max) boundary, what's drawn on screen is compressed by the UIScrollView rubber-band function:

f(x, d, c) = sign(x) · (|x|·d·c) / (d + c·|x|)
x = distance past the boundary, d = viewport height, c = stiffness (0.1 = very stiff, 1.0 = very loose)

As |x| grows, f(x) saturates instead of growing linearly — that's the "squishy resistance" felt when over-pulling a list, and lower c makes it stiffer.

3. Spring-damper bounce-back. While the raw position is outside the bounds, its motion switches from plain friction to a critically-ish damped spring pulling it back to the boundary:

a = −k·(pos − boundary) − b·v   (k = spring stiffness, b = fixed damping)
v(t+dt) = v(t) + a·dt ,  pos(t+dt) = pos(t) + v(t)·dt

Higher k snaps back faster; turning rubber-band off clamps position instantly at the boundary and zeroes velocity instead, so you can feel the difference between an elastic and a rigid edge.

Drag the list · release to fling