javascript - 当聚焦位于模式内部的输入时防止页面滚动

Question

在我的网站上，我有一个抽屉(模式)，其中包含带有输入的表单。每当用户单击输入时，浏览器都会尝试将它们居中，但由于抽屉是绝对定位的，因此它会滚动底层内容，并且绝对定位的元素会跳转。这种情况发生在 iOS 设备上，无论是 chrome 还是 safari。

有办法解决吗？到目前为止我在网上找到的所有内容都不起作用。

这是一个codesandbox https://codesandbox.io/s/small-water-v1m1tq

这是一个 gif

其实这是一个我很长时间都无法解决的老问题，但最近我注意到这个概念有这样的情态，他们以某种方式设法解决了这个问题。

这个模态没有上边距，但这并不重要。 将布局更改为像他们的布局，但没有任何帮助。这是一个链接:https://leather-colby-f69.notion.site/Job-Board-4323320545bb4484bfc1008cff34cebd

Answer 1

根据我的测试，闪烁似乎是由 Safari 在再次计算布局之前调整窗口大小引起的。我的猜测是包含输入的固定布局和一些晦涩的错误的某种组合。

根据我简单添加的代码

html, body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}

然后问题就消失了。我怀疑通过将 html 和 body 元素设置为相对定位(而不是默认的静态)，当 Safari 在键盘显示/上进行调整大小恶作剧时，它会正确地重新计算布局隐藏。这些只是基于观察的猜测。

这种类型的样式也类似于您在 css 重置表中看到的样式。他们这样做的原因可能是这种行为的线索。