时间戳

首页 > 解决方案 > 键盘上方的空白区域（IOS Safari）

ios - 键盘上方的空白区域（IOS Safari）

问题描述

我正在用香草 Javascript 构建一个聊天机器人，它在 Android 手机中运行良好，但在 iPhone 中，当键盘打开并且我向下滚动时，它会显示一个空白区域。我读到“安全区域”是造成的，但我不确定如何在 vanilla JavaScript 中修复它。

我试过这样做https://developer.mozilla.org/en-US/docs/Web/CSS/env但它似乎不起作用。

图像看起来像iOS 中键盘和 UIVew 之间的空白空间

有任何想法吗？

标签： iosiphone

解决方案

该问题是由过度滚动引起的，而不是安全区域。

不幸的是，没有简单的方法可以解决它。我这样做的方法是将这个插件（https://github.com/willmcpo/body-scroll-lock）应用到在键盘打开时应该可以滚动的容器，并将这种样式添加到其中，这样它就可以滚动了锁定身体​​卷轴时拥有

.ios-scroll-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

推荐阅读