防止iOS 15 Safari上的“选择”输入隐藏和显示地址栏？

Question

这真的很好奇。与select 输入交互似乎隐藏/显示基于浏览器“感知滚动”的地址栏。

我了解与正常内容相关的页面滚动的行为，但在与 select 输入交互时，地址栏根据滚动方向隐藏/显示是没有意义的。这是在 ios 15.x 上，虽然下面的示例是在模拟器上，但原始的“错误”是在实际的 ios 设备上捕获的。

在这种情况下，通过 JS 更改滚动位置似乎没有任何作用，更新 dom 元素上的 overscroll-behavior 或 touch-action css 属性也没有。

这是有问题的行为：

Answer 1

看起来这是 Safari 上 iOS 15+ 中的一个错误。 Chrome 上没有这样的问题。 尽管如此，我还是找到了解决方法。 我做了一个例子，你可以测试它here。只需在您的 iOS 设备上打开该链接。您可以在 my GitHub 上找到带有示例的 git 存储库。

这不是一个好习惯，它只是一种解决方法，所以你可以选择是否使用它。

另外，仅供参考：我已与与我关系密切的其他开发人员进行了讨论，我们一致认为在可滚动页面中包含可滚动元素并不是一个很好的做法。在其他平台上也可能发生一些不可预测的故障。如果可能的话，最好有另一个 UI 元素。