移动端浏览器原生支持的弹性回弹（bounce）效果仅作用于根滚动容器（如 <body>），无法通过 CSS 或 Tailwind 类（如 overscroll-contain）为普通 <div> 启用该效果；这是浏览器底层行为，非可配置样式属性。

移动端浏览器原生支持的弹性回弹（bounce）效果仅作用于根滚动容器（如 `

`），无法通过 css 或 tailwind 类（如 `overscroll-contain`）为普通 `

` 启用该效果；这是浏览器底层行为，非可配置样式属性。

在 iOS Safari、Chrome for Android 等主流移动浏览器中，“橡皮筋式”回弹（overscroll bounce）是一种由系统级滚动引擎控制的交互反馈，仅对文档根滚动容器（即 document.scrollingElement，通常是 <body> 或 <html>）生效。你示例中带 overflow-y-scroll 的红色 <div> 是一个独立的局部滚动容器，其滚动行为由浏览器的子滚动机制处理——该机制默认禁用弹性回弹，且目前没有任何标准化的 CSS 属性（包括 overscroll-behavior 系列）能“开启”该效果。

值得注意的是：

• overscroll-behavior: contain（对应 Tailwind 的 overscroll-contain）的作用是阻止滚动穿透和连锁回弹（例如避免内部滚动到底后触发外层页面滚动），而非启用回弹；
• 尝试设置 overscroll-behavior: auto 或 overscroll-behavior: spring（后者为实验性非标准值）均无效——CSS 规范中不存在 spring 关键字，且 auto 仅影响溢出时的行为传递，不生成弹性动画；
• JavaScript 模拟（如监听 touchmove + transform: translateY() + 弹簧物理计算）虽技术上可行，但会牺牲原生滚动性能、手势流畅度与惯性滚动，并可能破坏 scroll-snap、position: sticky 等特性，强烈不推荐用于生产环境。

✅ 正确实践建议：

• 若需统一回弹体验，应将内容结构重构为单页根滚动布局（即让整个页面由 <body> 承担滚动，用 position: sticky 或 flex 布局实现固定区域）；
• 对局部滚动容器，接受其无回弹的原生行为——这反而是符合 WCAG 可访问性与平台一致性原则的设计；
• 如确有强交互需求（如卡片列表滑动反馈），可结合 :active 状态或 scale 动画提供轻量视觉反馈，而非模拟物理回弹。

<!-- ✅ 推荐：利用根滚动 + sticky 实现类似布局 -->
<body class="h-screen overflow-y-auto">
  <div class="min-h-full flex flex-col">
    <div class="flex-1 overflow-hidden">
      <!-- 内容区（随 body 一起滚动，自然获得 bounce） -->
      <div class="h-[300vh] bg-red-400 p-6">Lorem ipsum...</div>
    </div>
    <div class="h-20 bg-slate-400 sticky bottom-0"></div>
  </div>
</body>

总之：弹性回弹不是样式属性，而是浏览器对根滚动容器的专属优化策略。试图在 <div> 上“开启”它，本质上是在对抗平台约定——与其绕过限制，不如顺应原生滚动模型设计更健壮、更兼容的交互方案。