iOS Safari输入框聚焦异常居中及干扰下拉刷新问题求助

问题场景 #

仅在iOS Safari 14/15及16+版本中出现：输入框聚焦时（非必现），Safari自动将输入框拉至屏幕中央的行为，会与下拉刷新功能冲突，引发弹性滚动异常。

已尝试的无效/不理想方案 #

• 透明度动画阻止滚动：尝试通过输入框聚焦时的透明度动画阻止默认滚动，无效果：

input:focus {
  animation: blink_input_opacity_to_prevent_scrolling_when_focus 0.1s;
}

@keyframes blink_input_opacity_to_prevent_scrolling_when_focus {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

• 完全关闭下拉刷新与弹性滚动：虽能解决冲突，但会破坏iOS用户的使用习惯，不可取：

body { -webkit-overflow-scrolling: none; overscroll-behavior: none; }

可行解决方案 #

1. 手动锁定聚焦时的滚动位置 #

监听输入框的focus事件，记录当前滚动位置并强制回滚，覆盖Safari的自动居中行为：

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('focus', () => {
    const currentScroll = window.pageYOffset || document.documentElement.scrollTop;
    // 立即回滚到原位置
    window.scrollTo(0, currentScroll);
    // 延迟执行二次回滚，应对Safari的异步滚动处理
    setTimeout(() => window.scrollTo(0, currentScroll), 10);
  });
});

2. 限制下拉刷新的触发范围 #

如果下拉刷新是自定义实现，仅在页面处于顶部且下拉距离达标时才触发，避免输入框聚焦滚动误触：

let touchStartY = 0;
const REFRESH_THRESHOLD = 50; // 下拉触发阈值

window.addEventListener('touchstart', e => {
  touchStartY = e.touches[0].clientY;
});

window.addEventListener('touchmove', e => {
  const touchCurrentY = e.touches[0].clientY;
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 仅页面在顶部且下拉超过阈值时，才触发下拉刷新
  if (scrollTop === 0 && touchCurrentY - touchStartY > REFRESH_THRESHOLD) {
    // 执行你的下拉刷新逻辑
    // e.preventDefault(); // 若仍有冲突，可取消默认滚动行为
  }
}, { passive: false });

3. 使用独立滚动容器隔离滚动行为 #

将页面内容放入独立滚动容器，避免body直接滚动，减少Safari默认行为的干扰，同时保留弹性滚动：

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

.page-scroll-container {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* 保留iOS弹性滚动 */
  overscroll-behavior-y: contain; /* 防止滚动溢出到body */
}

将页面所有内容包裹在.page-scroll-container中，输入框聚焦时的滚动仅在容器内发生，不会触发body层面的下拉刷新冲突。

总结 #

优先尝试手动锁定滚动位置的方案，操作简单且侵入性低；若自定义了下拉刷新，优化触发范围能精准规避冲突；独立滚动容器则适合复杂页面场景，从根源上隔离滚动行为。这些方法都能保留iOS用户熟悉的交互体验，同时解决滚动异常问题。

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