在 iOS Safari 中输入焦点后无法滚动的模式(固定元素)

Posted

技术标签:

【中文标题】在 iOS Safari 中输入焦点后无法滚动的模式(固定元素)【英文标题】:Modal (fixed element) unscrollable after input focus in iOS safari 【发布时间】:2015-10-29 16:04:55 【问题描述】:

我已经花了大约 8 个小时来尝试解决这个问题,感谢任何帮助!

如何重现:

打开高于窗口高度的模式(在 iPhone 中) 聚焦输入字段 在 ios 键盘中按“完成”

你不能再滚动到模态框的底部

jsbin: https://jsbin.com/hagiyojufu (https://jsbin.com/hagiyojufu/1/edit?html,css,js,output)

【问题讨论】:

我有这样的问题,你有什么解决办法吗? 【参考方案1】:

添加这个css代码:

html, body 
 overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;

【讨论】:

你可以将上面的css添加到特定的div然后检查【参考方案2】:

将此添加到 bootstrap.css 中的 .modal-open(overflow:hidden; - 已经在我的里面了)。

.modal-open 
  position: fixed;
  overflow: hidden;
  left:0;
  right:0;

这是我正在使用的临时解决方案。它使滚动再次起作用,但是当模式关闭时,主页会滚动回顶部。比以前更好,但不是真正的解决方案。我得到了解决方案: @Eru Penkman - Bootstrap 3 modal with long form on iPhone doesn't scroll if you touch input field

他还补充说:

.modal
  -webkit-overflow-scrolling: auto;

但这并没有解决 scroll back to top 问题并导致滚动出现故障,所以我也把它放回去了:

.modal
  -webkit-overflow-scrolling: touch;

希望这会有所帮助。如果您找到解决所有问题的解决方案,请告诉我... :)

【讨论】:

【参考方案3】:

超级老线程,但我刚刚遇到这个问题,所以这是我的解决方案。我有 javascript 中引用的所有元素。当用户输入输入时,将填充搜索结果列表。添加这些结果,再加上 iOS 在打开键盘时移动物体的行为会导致错误,一旦键盘消失,保存输入和结果的 div 的容器将无法滚动。

// results is a div holding the results. 
// As soon as the search returns and the results are 
// added (even before the keyboard is gone) i run the 
// code below and once the keyboard is gone things scroll 
// properly. It's basically a hack to get the browser to 
// recalculate positioning and rendering. class 'absolute'
// just sets the position to absolute from it's default 'relative'.

results.addClass('absolute');
// Force browser to assume there's upcoming rendering to do
results.element.clientHeight;
// remove class
results.removeClass('absolute');

似乎无论对哪个元素、结果容器或父元素执行此操作,它都可能适用于该层次结构中的其他元素。

【讨论】:

以上是关于在 iOS Safari 中输入焦点后无法滚动的模式(固定元素)的主要内容,如果未能解决你的问题,请参考以下文章

iOS Safari/Chrome - 在模式内聚焦输入时不需要的滚动

使用 Safari 在输入焦点上不需要的自动滚动到顶部

Safari(移动)IOS - 单击外部时输入不会失去焦点

在 Mobile Safari 中选择 onchange 后,将焦点设置为输入字段

即使设置了焦点也无法在文本框中输入

iOS Safari 放大输入框