iOS 等移动系统原生支持容器内滚动时的“弹性回弹”（bounce）效果，但该行为由浏览器引擎底层控制，无法通过 CSS 或 Tailwind 的 overscroll-* 类直接启用；overscroll-contain 反而会禁用该效果。
ios 等移动系统原生支持容器内滚动时的“弹性回弹”（bounce）效果，但该行为由浏览器引擎底层控制，无法通过 css 或 tailwind 的 `overscroll-*` 类直接启用；`overscroll-contain` 反而会禁用该效果。
在 Web 开发中，我们常观察到：当在 iOS Safari 中滚动整个页面（
）时，会出现明显的弹性回弹（bounce）动画；但对内部可滚动容器（如 .bg-red-400 外层的红色 div）默认不触发该效果——这并非 CSS 缺失，而是浏览器策略使然。关键事实如下：
- ✅ 弹性滚动是平台级行为：仅对根滚动容器（如 document.scrollingElement 或 ）由系统自动启用，属于 WebKit/iOS 的原生交互特性；
- ❌ overscroll-behavior 不控制 bounce：overscroll-contain、overscroll-auto 等属性仅影响滚动链传递（例如阻止父容器随子容器滚动到底部时继续滚动），不启用/禁用弹性动效本身；
- ⚠️ 自定义实现极不推荐：虽可通过 touchmove + transform: translateY() + 物理动画库（如 framer-motion 或自研弹簧算法）模拟 bounce，但会破坏原生滚动性能、手势惯性、滚动条同步，并导致 position: sticky、scroll-snap 等特性失效；
- ? 无跨浏览器方案：Chrome / Firefox on Android 默认无 bounce；即使在 iOS 上，对非根容器强制启用 bounce 也无标准 API 支持（scroll-behavior: smooth 与 bounce 无关）。
因此，您当前代码中：
<div class="w-60 h-96 bg-black overflow-y-scroll overscroll-contain"> <div class="w-full bg-red-400">Lorem ipsum...</div> </div>
overscroll-contain 实际上主动抑制了滚动链传递（防止滚动穿透到 body），但它对是否显示 bounce 毫无影响——该 div 本就不会有 bounce，加不加这个类结果一致。
✅ 正确做法是：
若需统一视觉反馈，可考虑设计层面替代方案，例如：
- 在滚动触底/顶时添加 subtle 微交互动画（CSS @keyframes + scrollend 事件监听）；
- 使用 scroll-snap-type 配合 scroll-snap-align 实现吸附式弹性感；
- 接受平台差异，遵循原生交互范式——用户对「局部容器无 bounce」并无认知负担，反而是强行模拟易引发体验割裂。
总结：不要尝试为非根容器启用 bounce 效果。它不是缺失的 CSS 功能，而是有意为之的平台限制。专注内容结构、滚动性能与无障碍支持，比复刻系统动效更重要。
