我目前正在开发一个具有会员搜索功能的网站，并且我有一个包含联系表单的模式窗口，在特定的用户交互时，该窗口会在其余内容上弹出。模态本身有一个position: fixed属性并且是可滚动的。但是，当我选择文本输入并且键盘向上滑动时，模式的内容会滚动到底部，将所选输入放置在可见区域之外，并严重破坏 UX 流程（因为您必须向上滚动才能看到你正在输入的内容）。是否有我遗漏的东西或一些随机属性扰乱了滚动检测？
奇怪的是，我只在移动设备和平板电脑 Android 浏览器（尤其是 Chrome 和 Firefox）上遇到过这个问题，而在 iOS（Chrome 和 Safari）上却没有遇到过。我还确保使用此 JavaScript 库锁定多平台和多浏览器页面滚动。
因此，我已经尝试了一些事情，但都没有成功。我尝试使用 JavaScript 将模态框的高度硬编码为视口高度（最初设置为100vh），当滚动停止时，我在表单底部留下了一个无法到达的区域（很可能相当于键盘的高度）包含一半字段和提交按钮，这本身并不是真正的修复。我还尝试使用绝对定位，将顶部值强制到当前正文滚动位置，但没有成功。
HTML：
<section class="modal__container row row--h-center wrapper">
<div class="modal__content">
<!-- Form content (title, subtitle, fields) -->
</div>
</section>
并向容器添加一个弹性盒显示，并水平居中对齐row。row--h-center
CSS：
.modal__container {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000000000000;
pointer-events: none;
overflow-y: scroll;
.modal__content {
position: relative;
width: 80vw;
margin: auto 0;
}
}