Question

鉴于iOS通过滚动/打破<input type='text'>来响应position: fixed，是否有办法阻止iOS / Safari接收该事件？我已经尝试了这个bug的无数变通方法，但没有一个对我们的用例很好。我确实需要输入来获得:focus伪类，并且在它聚焦的那一刻调用blur并不能完全解决问题，但任何其他建议都会受到赞赏！

对于某些背景，我们有一个自定义键盘，我们隐藏iPad键盘（使用输入上的属性readonly），键盘固定在屏幕底部。除了当页面的高度大于iPad屏幕的高度时，它的效果非常好，如果有人点击输入，我们的自定义键盘会跳到页面底部，无法看到。我目前有一个解决方法，我们切换到position: absolute，但我们有这么多页面，它不是理想/容易出错需要计算自定义键盘的位置，所以它似乎位于底部每次iPad屏幕。注意我不需要这个解决方案在iPhone / Android上工作。

Answer 1

这是一个非常黑客，但似乎有效：

body, html {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

只需将其添加到您的CSS中即可。我需要删除保证金，不确定这是否会影响您的设计。如果是这样，你可能会尝试添加填充，但我还没试过。

这个想法是阻止html元素滚动，欺骗Safari，因为它似乎只是试图在最外面的元素中进行。

如果html没有滚动，我需要添加回滚，所以我将它应用到正文。这使得滚动失去了动力，并且要将它添加回来，你需要-webkit-overflow-scrolling: touch这个东西。

所以，为了更清楚发生了什么，代码应该是这样的 - 但我没有尝试过：

html {
    margin: 0;
    overflow: hidden;
    height: 100%
}
body {
    margin: 0;
    overflow: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}

阻止iOS在<input />上处理焦点事件

1 个答案: