如何在iOS 15 Safari浏览器中禁用pull-to-refresh下拉刷新功能

DevOps 小满

2026-10-3

iOS 15 Safari 禁用下拉刷新解决方案

iOS 15 推出后，新版Safari默认新增的下拉刷新功能确实会对单页应用造成干扰，你尝试的overscroll-behavior-y: contain未生效是因为Safari对该属性的支持有特殊前提，以下是可行的实现方案：

方案1：CSS适配（优先推荐）

要让overscroll-behavior-y生效，需要先将滚动行为从系统默认的body/html转移到自定义的应用外层容器，配置如下：

/* 禁用根元素默认滚动 */
html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 单页应用最外层包裹容器 */
.app-container {
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  /* 保证iOS端滚动流畅度 */
  -webkit-overflow-scrolling: touch;
}

如果你的页面本身不需要上下滚动，直接给body设置overflow: hidden即可直接禁用下拉刷新。

方案2：JS兜底方案

如果CSS方案无法适配你的业务场景，可以通过触摸事件拦截实现：

let initialY = 0;
// 记录触摸起始位置
document.addEventListener('touchstart', e => {
  initialY = e.touches[0].clientY;
}, { passive: false });

// 拦截下拉到顶后的继续滚动行为
document.addEventListener('touchmove', e => {
  const currentY = e.touches[0].clientY;
  const containerScrollTop = document.querySelector('.app-container').scrollTop;
  // 滚动到顶部且继续下拉时阻止默认行为，避免触发下拉刷新
  if (containerScrollTop <= 0 && currentY - initialY > 0) {
    e.preventDefault();
  }
}, { passive: false });