Question

所有人,

我在一个网络应用程序上工作, 它包含一种非常“tall”的形式。 (比普通屏幕高几百倍。 ) ( 比普通屏幕高 ) 。

设计要求用一个“脚踏板”固定在屏幕底部,这个屏幕可以看得见,而不论窗体中的用户位置如何。

换句话说,页脚应该是可见的,无论用户是接近窗体的顶部、中间还是底部,表格应该滚动“下层”。

为了执行此操作, 我创建了该页脚作为 div, 带有 < code> position: fixed 和 < code> bottom: 0 。

包括iOS5上的Safari

除了有 < 坚固 > < /坚固 > 臭虫...

如果用户接近窗体的顶部, 并按预期对一个文本字段给予焦点, iOS 显示键盘。

每次点击用户 < 坚固> 下个 < / 坚固 > 按钮时, iOS “ tabs” 她会进入下一个字段。

当她通过多次点击 < 坚固> 下一步 < / 坚固 > 向窗体进发时, iOS 自动“ 缩放”, 所以她对窗体的位置仍然在观察中。

然而,iOS似乎没有更新 < code> position: fixed feed fooler div - 它与窗体的其余部分一起被错误地滚动。

如果用户取消键盘, div 会被恢复到“ 正确” 的位置, 所以这不是一个无法收回的错误。但是, 脚脚移动是一个突出的问题。

这是iOS s 执行 < code> position: fixed 的错误或缺点吗? 还是我做错了什么?

事先多谢!

<强 > [UPDATE]

Remy Sharp(大名)刚刚在iOS/Safari上写了一篇关于 position: fixed 各种错误和问题的精彩和详细的文章: < a href="http://remysharp.com/2012/05/24/issues- with-position-fixed-scrolling-on-ios/" rel="nofollow" > 。如果您在iOS用户预定的网站上重新考虑使用 posib=:fixed 网站,它是一个必须读的东西。

Answer 1

我知道 iOS 早期版本的iOS 最初没有支持 < code> 位置 : fixed , 我知道 iOS5 确实支持它, 但过去我曾对此有异议。如果您的页脚是某种控制栏, 那么我建议使用 CSS 粘贴页脚, 那么所有页面/ 内容都可以装入上面的 < code> div 。

Answer 2

你在用jQuery吗?

$(":input").focus( function() {
  $(window).scrollTop( $(window).scrollTop() + 1 );
});

通过滚动页面 1px 以新的窗体元素为焦点, 应该重置固定元素的底部属性。

Answer 3

问题就在这里,不要让脚踏在你身上

first you wrap the header and body/section in a div. Make that div scrollable.
than you position absolute the footer and position relative everything else.
add fixed heights.

http://yinnetteolivo.com/footerbottom.html” rel=“nofollow”>http://yinnetteolivo.com/foterbottom.html 。

欢迎您:)

Answer 4

我为这个错误找到的其他答案都没有对我起作用。我只需用34px向上滚动页面, 就可以修正它, 移动搜索的数量就会向下滚动。包括jquery:

$( .search-form ).on( focusin , function(){
    $(window).scrollTop($(window).scrollTop() + 34);
});

这显然会在所有浏览器中生效, 但它防止它破碎在iOS中。

友情链接