时间戳

首页 > 解决方案 > 当屏幕键盘打开时，带有溢出隐藏的正文会导致移动设备中的元素处于负位置

android - 当屏幕键盘打开时，带有溢出隐藏的正文会导致移动设备中的元素处于负位置

问题描述

我需要使 body 和 html 标签上的滚动失效并激活子元素上的滚动。

因此，我的代码中有这个 CSS：

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

我的代码在桌面上正常工作，但是当我在移动浏览器中使用我的网络应用程序时问题就开始了。

我在这个沙箱中做了一个示例代码，你可以在你的手机浏览器中通过这个 URL https://7m390.csb.app/打开它。

问题是什么？

在移动设备中打开应用程序，然后一定会看到如下内容：

第一视角

然后将光标放在页面底部的其中一个输入框上，打开屏幕键盘。

当屏幕键盘打开时

当屏幕键盘打开时，它将元素向上推，元素获得负 y 位置。

关闭屏幕键盘后

现在关闭屏幕键盘，元素将保持其负 y 位置。

这些图片显示了我的手机上的应用程序，带有 Chrome 的远程调试，如果你用 chrome 移动模拟器打开应用程序，即使使用它的屏幕键盘也不会看到这个错误！

在我的真实应用程序中，我有一个启用了滚动的包装器，我将在调整页面大小时设置它的高度。我没有将包装器放在这里以简化问题并阐明问题的根源。

我唯一需要的是防止在打开屏幕键盘时将元素推到负位置。

标签： androidhtmlcssiosgoogle-chrome

解决方案

推荐阅读