<think>我们之前已经讨论过
iOS键盘展开导致
页面被顶起且无法恢复的
问题。现在用户特别强调“H5采用
页面body滚动条”的场景，并且要求“不让
页面修改了视口高度”。这意味着我们需要寻找一种方法，在键盘弹出
时避免整个
页面被顶
上去，从而避免底部出现
空白。
问题核心：在
iOS中，当键盘弹出
时，系统会改变视口的高度，导致整个
页面被压缩，并且
页面会滚动到
输入框的位置。键盘收起后，
页面不会自动恢复，底部出现
空白。
解决思路：
1. 避免
页面整体被顶起：我们可以尝试让
输入框所在的滚动容器不是整个body，而是局部滚动容器（例如一个固定高度的div），这样键盘弹出
时，系统可能不会压缩整个
页面，而是只影响局部滚动区域。
2. 使用JavaScript动态调整布局：监听键盘事件，在键盘弹出
时调整布局，键盘收起
时恢复。
然而，在
iOS中，如果
页面使用body滚动条（即整个
页面滚动），那么键盘弹出
时，系统会调整视口，导致整个
页面被顶
上去。因此，我们需要改变滚动方式。
推荐方案：将整个
页面的滚动改为局部滚动（即在body内部设置一个固定高度的容器，并让容器滚动）。这样，当键盘弹出
时，系统不会压缩整个
页面，而是尝试在局部滚动容器内调整。
具体步骤：
1. 将
页面结构改为局部滚动：
```html
<body>
<div id="app" class="scroll-container">
<!-- 所有内容 -->
</div>
</body>
```
2. CSS设置：
```css
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 隐藏body的滚动条 */
}
.scroll-container {
height: 100vh; /* 或者使用100% */
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* 启用平滑滚动 */
}
```
3. 但是，这样设置后，在
iOS中键盘弹出
时，系统可能会调整局部滚动容器的高度，导致容器高度变小（即被压缩），从而内容被挤压。为了避免整个
页面被顶
上去，我们希望键盘弹出
时，只影响局部滚动容器内的
输入框定位，而不影响整体。
4. 然而，
iOS对局部滚动的容器支持不够好，键盘弹出
时可能不会自动滚动到
输入框。因此，我们需要在
输入框获取焦点
时，手动滚动到
输入框位置。
5. 使用JavaScript辅助滚动：
```javascript
document.querySelectorAll('
input, textarea').forEach(el => {
el.addEventListener('focus', function() {
setTimeout(() => {
// 滚动到
输入框位置
this.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300); // 延迟确保键盘已经弹出
});
});
```
6. 另外，我们还可以使用`position: fixed`布局，将整个
页面内容固定，然后内部滚动。这样键盘弹出
时，由于
页面是fixed定位，不会整体被顶起。
7. 但是，fixed布局在
iOS中也有
问题（比如底部工具栏会覆盖
页面底部），因此我们可以结合使用安全区域：
```css
.scroll-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
padding-bottom: env(safe-area-inset-bottom); /* 避免底部被遮挡 */
}
```
8. 这样，整个
页面内容在fixed容器内滚动，键盘弹出
时，容器高度不会变化（因为fixed定位相对于视口），因此不会出现底部
空白。但是，键盘弹出会覆盖在
页面上，我们需要确保
输入框在键盘上方可见，所以需要手动滚动
输入框到可视区域。
9. 键盘弹出
时，视口高度会变化，我们可以通过监听窗口大小变化（或视觉视口变化）来调整滚动位置：
```javascript
let windowHeight = window.innerHeight;
window.addEventListener('resize', function() {
// 当窗口高度变小（键盘弹出）
时，调整
输入框位置
if (window.innerHeight < windowHeight) {
const activeElement = document.activeElement;
if (activeElement && (activeElement.tagName === '
INPUT' || activeElement.tagName === 'TEXTAREA')) {
activeElement.scrollIntoView({ block: 'center' });
}
}
windowHeight = window.innerHeight;
});
```
10. 键盘收起后，窗口高度恢复，我们不需要额外处理，因为fixed容器高度是跟随视口的，所以底部不会有
空白。
注意：这种方法在
iOS上可能会遇到一些延迟
问题，但整体可以解决
页面被顶起的
问题。
总结方案：
- 使用fixed容器包裹整个
页面内容，并设置内部滚动。
- 监听resize事件，在键盘弹出
时（表现为窗口高度变小）手动滚动
输入框到可视区域。
- 使用安全区域避免底部遮挡。
代码示例：
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#app {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: env(safe-area-inset-bottom);
}
.content {
padding: 20px;
}
.
input-group {
margin: 20px 0;
}
input, textarea {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<!-- 多个
输入框 -->
<div class="
input-group">
<
input type="text" placeholder="请
输入">
</div>
<!-- 重复多个以模拟长表单 -->
</div>
</div>
<script>
// 监听窗口大小变化（用于检测键盘弹出/收起）
let windowHeight = window.innerHeight;
window.addEventListener('resize', function() {
// 键盘弹出
时，窗口高度变小
if (window.innerHeight < windowHeight) {
const activeElement = document.activeElement;
if (activeElement && (activeElement.tagName === '
INPUT' || activeElement.tagName === 'TEXTAREA')) {
// 需要延
时，因为键盘弹出需要
时间
setTimeout(() => {
activeElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
}, 300);
}
}
windowHeight = window.innerHeight;
});
</script>
</body>
</html>
```
这样，
页面不会因为键盘弹出而被顶
上去，键盘收起后也不会出现底部
空白。
注意：这种方法在Android上可能不需要，但也不会产生负面影响。
另外，
iOS13+支持了visualViewport API，也可以使用它来更精确地监听视口变化。
使用visualViewport:
```javascript
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', function() {
const activeElement = document.activeElement;
if (activeElement && (activeElement.tagName === '
INPUT' || activeElement.tagName === 'TEXTAREA')) {
activeElement.scrollIntoView({ block: 'center' });
}
});
}
```
但注意，visualViewport的resize事件在滚动
时也会触发，所以需要判断是否是键盘引起的。
因此，我们可以结合两种方式，优先使用visualViewport，在不支持的情况下使用window的resize事件。
§§相关
问题§§1. 如何区分
iOS键盘弹出和窗口其他原因引起的resize事件？2. 在局部滚动容器中，如何确保
输入框在键盘弹出
时始终可见？3. 使用position: fixed布局对
页面性能有什么影响？4. 如何兼容
iOS旧版本（如
iOS 12）的键盘弹出
问题？5. 在表单提交
时，如何避免键盘遮挡提交按钮？</think>###
iOS键盘展开导致H5
页面错位
问题的深度解决方案
在
iOS系统中，当H5
页面使用body滚动条
时，键盘展开会强制修改视口高度，导致
页面被顶起且无法恢复，造成底部
空白区域。以下是针对此
问题的完整分析和解决方案：
#### 核心
问题原因
1. **视口高度篡改机制**：
-
iOS会强制修改`visualViewport.height`值
- 但文档视口高度`document.documentElement.clientHeight`保持不变
- 导致布局计算基准不一致
2. **滚动位置劫持**：
- 键盘展开
时iOS自动滚动到
输入框位置
- 但键盘收起后不会恢复原始滚动位置
3. **CSS视口单位失效**：
- `100vh`/`100dvh`单位在键盘交互
时失去响应性
- 安全区域`env(safe-area-inset)`计算不更新
#### 终极解决方案
##### 方案1：视觉视口锁定技术（推荐）
```javascript
// 锁定初始视口高度
let lockedViewportHeight = window.innerHeight;
// 监听
输入框聚焦
document.addEventListener('focusin', (e) => {
if (['
INPUT', 'TEXTAREA'].includes(e.target.tagName)) {
// 保存当前滚动位置
sessionStorage.setItem('preKeyboardScroll', window.scrollY);
// 阻止
iOS默认滚动行为
e.preventDefault();
}
});
// 视觉视口变化处理
const viewportHandler = () => {
const visualHeight = window.visualViewport?.height || window.innerHeight;
// 键盘展开状态检测
if (visualHeight < lockedViewportHeight) {
// 应用高度补偿
document.body.style.transform = `translateY(${lockedViewportHeight - visualHeight}px)`;
} else {
// 恢复原始位置
document.body.style.transform = '';
// 还原键盘前滚动位置
const savedScroll = sessionStorage.getItem('preKeyboardScroll');
if (savedScroll) {
window.scrollTo(0, parseInt(savedScroll));
sessionStorage.removeItem('preKeyboardScroll');
}
}
};
// 添加监听
if (window.visualViewport) {
window.visualViewport.addEventListener('resize', viewportHandler);
} else {
window.addEventListener('resize', viewportHandler);
}
```
##### 方案2：CSS视口隔离技术
```html
<!--
页面结构 -->
<body>
<div id="scroll-container">
<!--
页面内容 -->
</div>
</body>
```
```css
/* 创建隔离层 */
#scroll-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
/* 动态高度补偿 */
height: calc(100 * var(--dvh, 1dvh));
}
/* 安全区域适配 */
@supports (padding: max(0px)) {
#scroll-container {
padding-bottom: max(env(safe-area-inset-bottom), 10px);
}
}
```
```javascript
// 动态更新隔离容器高度
const updateContainerHeight = () => {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--dvh', `${vh}px`);
};
window.addEventListener('load', updateContainerHeight);
window.addEventListener('resize', updateContainerHeight);
window.addEventListener('orientationchange', updateContainerHeight);
```
##### 方案3：
输入框智能定位
```javascript
//
输入框聚焦
时智能定位
document.querySelectorAll('
input, textarea').forEach(
input => {
input.addEventListener('focus', function() {
// 计算安全位置
const
inputRect = this.getBoundingClientRect();
const viewportHeight = window.visualViewport?.height || window.innerHeight;
const keyboardHeight = window.innerHeight - viewportHeight;
// 需要滚动的距离
const scrollOffset =
inputRect.bottom - (viewportHeight - keyboardHeight) + 50;
if (scrollOffset > 0) {
window.scrollBy({
top: scrollOffset,
behavior: 'smooth'
});
}
});
});
```
#### 兼容性增强方案
```javascript
//
iOS版本检测
const is
IOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// 旧版
iOS回退方案
if (is
IOS && !window.visualViewport) {
let lastWindowHeight = window.innerHeight;
window.addEventListener('resize', () => {
const newHeight = window.innerHeight;
// 键盘收起检测
if (newHeight > lastWindowHeight) {
setTimeout(() => {
window.scrollTo(0, parseInt(sessionStorage.getItem('preKeyboardScroll') || 0));
}, 300);
}
lastWindowHeight = newHeight;
});
}
```
#### 最佳实践组合
1. **布局层**：使用视口隔离容器方案
2. **交互层**：实现视觉视口锁定
3. **恢复层**：添加智能滚动定位
4. **兼容层**：提供
iOS版本降级方案
本文解决了iOS系统中点击input输入框导致整个div白屏的问题。解决方案是在input的父元素上添加position：relative属性。
扫一扫
1643
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
