Rubber-band at boundaries

Past an edge, resist more with distance, then spring back.

From apple-design, §9 Rubber-banding.

Pull a list past its edge

Drag a list past its edge, or fling both.

Hard stopBad

    y = clamp(y, min, max)
    Rubber-bandGood

      y = edge + rubberband(over, h, 0.55)
      const rubberband = (over, dim, c = 0.55) =>
  (over * dim * c) / (dim + c * Math.abs(over));

      Feel the curve

      Drag the thumb far past either end, or type a distance.

      Drag past the endTry
      dim = 96 px
      Finger vs elementLive
      How far the element moves for how far the finger goes past the edge 0 ½ 1× 1× 2× 3× 4× finger past the edge (× dimension) limit = dimension
      • Rubber-band
      • 1:1
      • ×0.5
      53 px
      slider.value = clamp(x / max, 0, 1);

      Why it matters, pros and cons

      Why it matters

      A hard stop looks frozen. Resistance keeps answering while saying there's no more.

      Pros

      • The element never stops tracking the finger.
      • Bounded: offset never exceeds the dimension.
      • One function covers lists, sheets, sliders.

      Cons

      • Native Apple scrolling already does this.
      • Windows and Android scroll edges clamp or glow.
      • Committed values must still clamp.