UI 动效 004：Rubber Band，拖到边界为什么会「弹」回来

自制 GIF 示意：列表被向下拖过顶部边界时，视觉位移先被压缩，松手后用 spring 回到 0；非真实产品截图。

动效档案

视觉上发生了什么

1. 正常滚动：内容跟着手指移动，滚动偏移还在合法范围内。
2. 撞到边界：顶部或底部已经到头，继续拖拽只进入 overscroll 区域。
3. 位移压缩：手指继续走 100px，内容可能只多移动 40px；越往后越难拉开。
4. 松手回弹：手指离开后，内容不直接闪回，而是按弹簧曲线回到边界。

什么时候该用它

实现关键：先压缩，再弹回

1. 边界检测

const atTop = scrollTop <= 0;
const atBottom = scrollTop + viewportHeight >= scrollHeight;
const enteringOverscroll = (atTop && dragY > 0) || (atBottom && dragY < 0);

2. 把手指位移映射成视觉位移

function rubber(distance, limit = 120) {
  const sign = Math.sign(distance);
  const x = Math.abs(distance);
  return sign * limit * (1 - Math.exp(-x / limit));
}

// 手指拉了 140px，视觉上可能只移动 82px
content.style.transform = `translateY(${rubber(dragY)}px)`;

3. 松手后用 spring 回到 0

const y = motionValue(0);

onDrag((dragY) => {
  if (!enteringOverscroll) return;
  y.set(rubber(dragY));
});

onRelease(({ velocityY }) => {
  animate(y, 0, {
    type: "spring",
    stiffness: 420,
    damping: 32,
    velocity: velocityY,
  });
});

CSS 曲线能不能凑一个？

.overscroll-release {
  transition: transform 360ms cubic-bezier(.18, 1.28, .22, 1);
  transform: translateY(0);
}

设计时别踩这 4 个坑

• 回弹距离太大：边界反馈会变成页面漂移。手机列表一般让视觉位移停在一个有限范围内就够了。
• 松手后停不回原位：Rubber Band 的最终状态必须是边界，不要让内容卡在 overscroll 区。
• 嵌套滚动没处理：弹窗里的列表到顶后，背后页面继续滚，会让用户觉得手势被抢走。Web 场景优先检查 overscroll-behavior。3
• 把它用在确认动作上：删除、支付、提交这类动作需要明确反馈，不适合用软绵绵的回弹来表达结果。

一句话记住它