在 Safari 里想实现跟原生 App 一样顺滑的滚动体验，关键难点不在性能，而在于那个“拉过头”的弹性回弹。

顶部下拉露出白边、底部上推多出一截，这些都是 iOS WebKit 对根元素特有的特殊处理。

直接给 html 或 body 加 overscroll-behavior 基本没用，光靠 overflow: hidden 更是形同虚设。

要彻底搞定，得拆成三层来打：CSS 容器控制、事件拦截，以及老版本系统的兜底策略。

先说第一个核心判断：你得把滚动责任从浏览器根元素手里抢过来，交给一个你自己定义的容器。

用 overscroll-behavior 禁止容器溢出回弹（iOS 16.4+ 有效）

这一步不是设给 body 的，而是设给你真正用来滚动的那个 div 容器。比如你的主内容容器叫

，给它加上：

#app { overscroll-behavior: none; }

注意：如果这个容器自身高度不足、没有设 overflow-y: auto，那这个样式等于白写。它必须同时满足两个条件：

• 是个独立的滚动上下文
• 高度占满视口

具体可以这样写：

height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;

一句话总结：#app 必须是滚动容器本身，不能是它的父级或子级。

用 JavaScript 拦截 touchstart 阻断下拉刷新与顶部回弹（全 iOS 版本通用）

这是目前最可靠的方法，能覆盖 iOS 15 及更早的所有版本，同时还能禁用 pull-to-refresh。

关键点在于两个：时机和 passive 配置。

第一：监听 touchstart，不是 touchmove

在 iOS 里，系统在 touchstart 阶段就已经决定是否启用 overscroll，到了 touchmove 再阻止就晚了。

第二：必须传 { passive: false }

否则 Safari 会直接忽略 preventDefault()，整个逻辑形同虚设。

第三：只在页面顶部且手指向下拖的时候才阻止

避免误伤正常的向下滚动。代码可以这么写：

function preventOverscroll(e) {
  if (window.scrollY === 0 && e.touches.length > 0 && e.touches[0].clientY < 50) {
    e.preventDefault();
  }
}
window.addEventListener("touchstart", preventOverscroll, { passive: false });

如果你的页面需要允许用户下拉刷新（比如某些信息流场景），那这条代码就要慎用。这里讨论的是完全禁用回弹的场景。

兼容老 iOS 的兜底处理（iOS 15 及以下必需）

即便上面的方案覆盖了大部分情况，iOS 15 及更老版本依然有坑。这时候需要几招兜底。

方法一：全局禁用 body 滚动 + 局部启用可滚动区域

给 body 加 overflow: hidden; height: 100vh;，然后只让内部需要滚动的模块（比如列表、弹窗）拥有滚动能力：

overflow-y: scroll; -webkit-overflow-scrolling: touch;

这样就把根元素的滚动彻底封印了，所有滚动行为都托管给你指定的容器。

方法二：补充 mousedown 拦截（适配 iPad 外接鼠标/触控板）

iPadOS 用户外接鼠标或触控板时，滚轮操作依然可能触发顶部回弹。加一行代码就能解决：

window.addEventListener("mousedown", (e) => e.preventDefault());

这行代码不能省，否则前面的工作可能功亏一篑。

方法三：避免使用 body-scroll-lock 类库

这套类库在 iOS 全屏 Web App 中经常导致 scrollHeight 计算异常，进而引发内容截断或滚动区域高度出错。既然自己动手就能搞定，就不必依赖这类存在兼容风险的第三方工具了。

总的来说，要实现 Safari 下真正的无回弹丝滑滚动，核心思路就一条：把滚动交给一个你完全可控的容器，并在系统层面抢在它触发回弹之前把事件截住。从上到下，从新到老，三个层次配合好，效果就能接近原生 App 的体验。