移动端点击输入框时全屏Web应用异常滚动问题求助

核心问题拆解 #

移动端软键盘弹出时，visualViewport高度更新正确，但页面出现可滚动至视口外的冗余区域，本质是浏览器视口调整行为和自定义高度控制的冲突：浏览器在键盘弹出时会自动触发页面滚动逻辑，而自定义的--app-height仅修改了应用高度，未完全约束页面滚动边界。

可行解决思路 #

1. 严格约束应用容器的滚动边界 #

不给根元素/body直接设置自定义高度，改为给应用最外层容器添加强约束样式，把应用完全固定在视口内：

.app-container {
  height: 100vh;
  height: var(--app-height);
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

同时重置html和body的基础样式：

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

2. 优化视口监听逻辑，强制修正滚动偏移 #

原函数仅更新高度，补充监听visualViewport的滚动事件，强制将页面滚动位置重置到合理范围，抵消浏览器自动滚动的影响：

export const setupViewportHandlers = () => {
  const setAppHeight = () => {
    document.documentElement.style.setProperty('--app-height', `${visualViewport.height}px`);
  };

  // 初始化设置
  setAppHeight();

  // 监听视口高度变化
  visualViewport.addEventListener('resize', setAppHeight);

  // 强制重置滚动位置，避免溢出
  visualViewport.addEventListener('scroll', () => {
    window.scrollTo(0, 0);
  });

  // Vue组件销毁时移除监听，防止内存泄漏
  return () => {
    visualViewport.removeEventListener('resize', setAppHeight);
    visualViewport.removeEventListener('scroll', () => window.scrollTo(0, 0));
  };
};

在Vue根组件的生命周期中调用：

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { setupViewportHandlers } from './utils';

onMounted(() => {
  const removeHandlers = setupViewportHandlers();
  onUnmounted(removeHandlers);
});
</script>

3. 用Vue响应式变量绑定容器高度 #

把视口高度存入Vue响应式变量，直接绑定到容器样式上，避免CSS变量可能的延迟或冲突：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const appHeight = ref(window.innerHeight);

const updateAppHeight = () => {
  appHeight.value = visualViewport?.height || window.innerHeight;
};

onMounted(() => {
  visualViewport?.addEventListener('resize', updateAppHeight);
  window.addEventListener('resize', updateAppHeight);
});

onUnmounted(() => {
  visualViewport?.removeEventListener('resize', updateAppHeight);
  window.removeEventListener('resize', updateAppHeight);
});
</script>

<template>
  <div class="app-container" :style="{ height: `${appHeight}px` }">
    <!-- 应用内容 -->
  </div>
</template>

<style scoped>
.app-container {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
</style>

4. iOS端特殊适配 #

给页面添加meta标签增强视口控制，避免Safari的特殊滚动行为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">

viewport-fit=cover可让应用完全覆盖视口，减少安全区域带来的额外空间。

关键注意点 #

• 不要给多个层级元素同时设置自定义高度，避免滚动嵌套冲突；
• 所有监听事件必须在Vue组件销毁时移除，防止内存泄漏；
• 务必在真实移动端设备上测试，模拟器行为可能与真机存在差异。

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