← 全部效果

下拉拉大顶图

滚动已到顶还继续往下拉时，顶部大图跟手放大而不是被死死顶住——覆盖文字同步淡出，松手后带阻尼回弹归位。这是相册 / 个人主页最经典的 overscroll 弹性头手感，也是「App 质感」出现频率最高的细节之一。

实时 Demo

+0 px

雪山日出滑到最顶，继续往下拉试试

弹性头只认「过量下拉」

滚动位置在 0 以内时下拉量才生效，正常滚动不受影响。

跟手但衰减

头图放大按 0.4 倍阻尼跟随下拉距离，拉得越久越长但越沉。

松手回弹

释放后用弹簧曲线把 --s 拉回 0，带一次轻微超调。

内容渐隐

头图文字随拉伸同步淡出，避免被放大拉糊。

相册常见

微信朋友圈封面、iOS 相册详情页、各类个人主页都是这套手感。

继续滚

下面的普通内容随便滚，回弹只发生在最顶部。

↑ 在手机框里滚到最顶，继续向下拉，松手看回弹

调参台拖动滑杆实时改手感，提示词同步更新

效果拆解

过量滚动量：核心变量是 overscroll 距离 d = max(0, -scrollTop)。d=0 时一切如常；只有 d>0（已到顶还往下拽）才驱动头图，与普通滚动完全解耦。
阻尼跟手：放大倍率不等于下拉距离，而是 s = d / (基准高度 × 刚度)。刚度越小头越「沉」——本页默认 0.4 倍阻尼，拉 100px 头图只长 40px，拉到后面越来越费劲。
弹簧回弹：松手后不能线性归零，用 spring（stiffness+阻尼比 < 1）插值回 0，产生一次 2-3% 的轻微超调，这正是「有弹性」vs「橡皮筋断掉」的分界线。
只动合成层：放大走 transform: scale，高度变化用 height 过渡；文字内容 opacity 反向淡出避免拉糊。全程 rAF 节流，scroll 事件里只记 dirty。

AI 提示词

用现代前端技术实现下拉拉大顶图（Stretch Header）：滚动容器到顶后继续下拉时，过量滚动量 d = max(0, -scrollTop) 驱动顶部大图跟手放大——缩放 = 1 + d/基准高度 × 阻尼 ${v.stiff}（拉得越久越沉），放大用 transform: scale 以底部为原点，头图内文字随 d 以 opacity 同步淡出防拉糊。松手后用弹簧（stiffness ${v.spring}，阻尼比 0.72）把缩放插值回 1，允许 2-3% 轻微超调。要求：正常滚动不受影响；rAF 节流 scroll 事件；只写 transform/opacity 合成层属性；overscroll-behavior: contain 防止页面级橡皮筋。

参数可调：跟手阻尼 stiff（放大多「跟手」）、回弹弹簧刚度 spring（回多快）。
注意：iOS 原生橡皮筋会和本效果叠加，记得 overscroll-behavior: contain；回弹动画期间要允许新的下拉随时打断接管。