无法为自定义滚动容器启用原生弹性回弹效果，因该效果仅由浏览器底层对根滚动容器（如body）自动启用，CSS的overscroll-behavior等属性仅控制滚动链传递，不能开启局部容器的bounce行为。

弹性滑动效果本质是滚动容器的 overscroll 行为

不是靠 transform 或 animation 模拟出来的——iOS 原生的“回弹”是系统级滚动行为，CSS 能做的，是启用并微调这个底层能力。关键在 overscroll-behavior 和容器滚动属性的组合，而非手写物理公式。

必须设置 overflow: scroll/auto 并启用弹性惯性

只设 overflow-x: auto 不够，iOS Safari 默认对 body 和 html 级容器禁用弹性滚动。实操要点：

• 目标容器（如列表外层 div）需明确设 overflow-y: scroll 或 overflow-x: scroll，且高度/宽度固定（不能是 auto）
• 加 -webkit-overflow-scrolling: touch（iOS 15+ 已非必需，但低版本仍需保留）
• 为防父容器干扰，建议同时设 overscroll-behavior-y: contain（或 none），避免滚动穿透到 body
• 若需横向弹性滑动，容器必须设 white-space: nowrap + 子项 display: inline-block 或 flex 布局，否则内容会换行导致无法横向滚动

隐藏滚动条但保留滚动能力

“无滚动条”不等于 overflow: hidden——那会直接禁掉滚动。正确做法是视觉隐藏、功能保留：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• Chrome/Safari：用 ::-webkit-scrollbar { display: none; }
• Firefox：默认不显示滚动条，无需额外处理；若需兼容旧版，可用 scrollbar-width: none
• 注意：iOS 上 scrollbar-width 无效，仅依赖 ::-webkit-scrollbar
• 别漏掉 touch-action: pan-y（横向滑动时）或 pan-x（纵向），否则 iOS 可能触发页面整体拖拽

滚动驱动动画可增强反馈，但非弹性本身

@scroll-timeline 和 animation-timeline 是 2026 年已广泛支持的新特性（Chrome 115+、Firefox 159+、Safari 17.4+），但它只负责「随滚动触发动画」，比如滑过时缩放卡片、淡入文字——它不提供滚动惯性或回弹。真正影响弹性手感的，只有容器的 overflow 设置和系统默认行为。

立即学习“前端免费学习笔记（深入）”；

容易被忽略的一点：iOS 的弹性强度无法用 CSS 调节。它由系统统一控制，开发者只能启用或禁用（通过 overscroll-behavior），不能改“松紧度”或“阻尼系数”。所谓“调参”，实际是换用 JS 物理库模拟，那就脱离原生滚动了。