如何在Safari打开虚拟键盘时阻止下拉刷新？

overscroll-behavior: none在虚拟键盘唤起后失效，核心原因是移动端浏览器视口高度随键盘弹出发生变化，导致页面滚动行为超出预期限制。以下是几种实用的解决方法：

方法一：动态监听键盘状态调整容器样式 #

通过监听窗口尺寸变化判断键盘状态，针对性修改滚动容器的样式：

1. 记录初始视口高度，监听resize事件，当视口高度大幅降低时判定为键盘已唤起
2. 键盘打开时，给滚动容器添加触摸行为限制和溢出隐藏属性；键盘关闭时恢复原有设置

示例代码：

let initialViewportHeight = window.innerHeight;

window.addEventListener('resize', () => {
  const currentHeight = window.innerHeight;
  const isKeyboardActive = currentHeight < initialViewportHeight * 0.8; // 阈值可按需调整

  const rootContainer = document.documentElement;
  if (isKeyboardActive) {
    rootContainer.style.touchAction = 'none';
    rootContainer.style.overflow = 'hidden';
  } else {
    rootContainer.style.touchAction = '';
    rootContainer.style.overflow = '';
    initialViewportHeight = currentHeight;
  }
});

方法二：通过JS阻止触发下拉刷新的触摸行为 #

在页面上监听触摸事件，拦截顶部下拉的默认行为：

let startTouchY = 0;

document.addEventListener('touchstart', (e) => {
  startTouchY = e.touches[0].clientY;
}, { passive: false });

document.addEventListener('touchmove', (e) => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const currentTouchY = e.touches[0].clientY;

  // 滚动到顶部且继续向下拉时，阻止默认滚动行为
  if (scrollTop <= 0 && currentTouchY > startTouchY) {
    e.preventDefault();
  }
}, { passive: false });

注意：必须设置{ passive: false }，否则部分浏览器默认的被动监听会导致preventDefault()无法生效。

方法三：重构页面滚动布局 #

将滚动行为限制在固定高度的内部容器中，避免页面级滚动触发下拉刷新：

1. 把根元素设置为满屏且溢出隐藏
2. 内部滚动容器设置为满屏高度，开启垂直滚动并保留overscroll-behavior: none

示例CSS：

html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.inner-scroll-container {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: none;
}

内容的提问来源于stack exchange，提问作者waterically