ios 默认允许用户滚动超出内容区域，导致背景容器“透出”，而 android 会自然阻断。通过 css `overscroll-behavior: none` 可统一禁用该弹性滚动效果，使 ios 表现与 android 一致。
在移动端 Web 开发中，position: fixed 容器内启用纵向滚动（如聊天面板、侧边菜单或固定高度列表）时，iOS Safari 的“橡皮筋”（rubber-band）滚动行为常带来不一致体验：用户可拖拽至内容顶部/底部之外，短暂露出底层容器背景（如示例中的黄色区域），而 Android Chrome 则严格限制在内容边界内。这种差异不仅影响视觉一致性，还可能干扰交互逻辑（例如下拉刷新误触发）。
解决方法非常简洁：为滚动容器添加 overscroll-behavior: none：
#container {
position: fixed;
height: 100px;
width: 200px;
background: yellow;
overflow: hidden;
overflow-y: scroll;
border: 1px solid black;
/* 关键修复：禁用滚动溢出行为 */
overscroll-behavior: none;
}✅ 作用说明：
- overscroll-behavior: none 同时禁用 scroll-chain 的向上/向下传播，即阻止滚动越过内容边界时触发父容器或页面本身的滚动回弹；
- 它等效于分别设置 overscroll-behavior-x: none; overscroll-behavior-y: none;；
- 仅作用于当前元素的滚动边界，不影响内部内容的正常滚动能力。
⚠️ 注意事项：
- 兼容性良好：iOS Safari 16.4+、Chrome 63+、Firefox 59+ 均支持（Can I use overscroll-behavior）；若需兼容旧版 iOS（
- 不要滥用在整页 上——这会禁用下拉刷新和页面级滚动回弹，仅建议用于明确的局部滚动容器；
- 若容器同时存在横向与纵向溢出需求（如仅禁止垂直回弹但保留水平惯性），可使用 overscroll-behavior-y: none; overscroll-behavior-x: auto; 精细控制。
总之，overscroll-behavior: none 是现代 Web 实现跨平台滚动行为对齐的首选方案，轻量、声明式、无需 JS 干预，是提升 iOS Web 体验的关键 CSS 属性之一。
