Question

我知道iScroll和我已经使用jQuery mobile很长一段时间了，我知道他们都解决了这个问题，但我想自己做，而不是为此包含一个大框架。我的问题是jQuery Mobile如何解决这个问题：修复;关于iOS的问题？目前，我的所有固定定位元素仅在滚动完成时才会改变位置，但它应始终固定在顶部，而不仅仅是在滚动的末尾。

Answer 1

我遇到了同样的问题。我的身体上有一个固定的元素，这是非常错误的。对我来说height:auto;代替height:100%工作。完整代码：

body,
html{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:auto; /* iOS position:fixed; elements fix (not 100%) */
    min-height:100%;
    overflow-x:hidden;
}

Answer 2

iOS 7上的

position:fixed效果非常好，实际上（有一些小问题，例如根据某些因素可能会出现抖动问题）所以我想也许你正试图模仿一个粘性卷轴（滚动到某个y偏移时元素修复的位置）。

不幸的是，对于iOS，您无法轻松完成此操作（当您滚动或轻弹时，所有JavaScript都会暂停，这就是事件结束时position:fixed发生的原因。如果你＆＃39;很幸运，你可以希望用户平移和定位：固定在touchmove上......）

正如您所提到的，有一些解决方法可以应用溢出和模仿本机滚动（例如iScroll）。这些工作，但他们是内存密集型（谢谢你，硬件加速平滑滚动）所以性能可能是一个问题，取决于你的需要。

对于iOS 7，position的值为sticky。这非常有效，如下所示：

http://html5-demos.appspot.com/static/css/sticky.html
http://caniuse.com/css-sticky

唯一的缺点是它仅限于iOS 6.1和7.但是，如果不关心旧设备，position:sticky是一个很好的解决方法，因为它是原生解决方案。

Answer 3

尝试使用内部滚动（overflow-y：scroll）创建块，并将它们放置在彼此靠近的内联块中。因此，您将获得独立的可滚动内容。

iOS7位置：固定;工作丑陋

3 个答案: