6

全部，

我正在开发一个包含非常“高”表单的 Web 应用程序。（高，这意味着它比典型的屏幕高百分之几）。

该设计要求将“页脚”锚定在始终可见的屏幕底部，无论用户在表单中的位置如何。

换句话说，无论用户是靠近窗体的顶部、中间还是底部，页脚都应该是可见的，并且窗体应该在它的“下方”滚动。

为了实现这一点，我将页脚创建为一个带有position:fixed, 和的 div bottom:0。

这适用于我测试过的所有浏览器，包括 iOS5 上的 Safari。

除了有一个错误...

如果用户靠近表单顶部，并将焦点放在其中一个文本字段上 - 正如预期的那样，iOS 会显示键盘。

每次用户单击“下一步”按钮时，iOS 都会将她“标记”到下一个字段。

当她通过反复单击Next向下滚动表单时，iOS 会自动“向上滚动”表单，因此她在表单上的位置仍然可见。

然而，iOS 似乎并没有更新position:fixed页脚 div 的位置——它与表单的其余部分一起错误地向上滚动。

如果用户关闭键盘，则 div 将恢复到它的“正确”位置，因此这不是不可恢复的错误。但是，页脚完全移动的事实是一个明显的问题。

这是 iOS 实现的错误还是缺点position:fixed？或者，我做错了什么？

提前谢谢了！

[更新]

Remy Sharp（恰如其名）刚刚写了一篇position:fixed关于 iOS/Safari 上的各种错误和问题的优秀而详细的帖子：http ://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling -on-ios/。position:fixed如果您正在考虑在面向 iOS 用户的网站上使用，那么这是必读的……

4

4 回答 4

2

我知道position:fixediOS 的早期版本最初不支持它，我知道 iOS5 确实支持它，但我过去曾遇到过问题。如果您的页脚是某种控制栏，那么我建议使用 CSS 粘性页脚，然后所有页面/内容都可以加载到div上面的一个。

于 2012-05-23T22:32:02.173 回答
2

你在使用 jQuery 吗？如果是这样，我怀疑这样的工作有效：

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

通过在聚焦新表单元素后滚动页面 1 像素，它应该重置固定元​​素的底部属性。

于 2012-05-23T22:33:43.937 回答
1

这是解决方法，无需让页脚在您身上跳来跳去。

  1. 首先，您将标题和正文/部分包装在一个 div 中。使该 div 可滚动。
  2. 比您定位页脚的绝对位置和其他所有位置的相对位置。
  3. 添加固定高度。

看到它在这里工作， http: //yinnetteolivo.com/footerbottom.html

别客气 ：）

于 2012-05-25T00:09:33.663 回答
0

我为这个错误找到的其他答案都没有对我有用。我可以通过将页面向上滚动 34px 来修复它，移动 safari 的数量会将其向下滚动。用jQuery：

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

这显然会在所有浏览器中生效，但它可以防止它在 iOS 中中断。

于 2012-08-30T16:52:22.587 回答