我知道iScroll和jQuery Mobile,并且我已经长时间使用了jQuery Mobile,我知道它们都解决了这个问题,但我想自己解决,而不是为此包含一个大型框架。 我的问题是,jQuery Mobile如何在iOS设备上解决了position:fixed;问题?目前,所有我的固定位置元素仅在滚动完成后才会改变位置,但它应该始终在顶部固定出现,而不仅仅出现在滚动结束时。
我遇到了同样的问题。我有一个固定在body上面的元素,这个元素很不稳定。对于我而言,使用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;
}
position:fixed
在 iOS 7 上表现得非常好,实际上(有一些小问题,例如根据某些因素可能会出现抖动),所以我认为你可能正在尝试模仿粘性滚动(当滚动到某个 y 偏移量时,元素固定)。
不幸的是,在 iOS 上你不能轻松地实现这一点(当你滚动或轻扫时,所有 JavaScript 都会停止,这就是为什么 position:fixed
在事件结束时发生。如果你很幸运,你可以希望用户拖动并在 touchmove 上使用 position: fixed...)
正如你所提到的,有一些解决办法,比如应用 overflow 并模仿本机滚动(例如 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
是一个很好的解决方案,因为它是本地解决方案。
尝试使用内部滚动(overflow-y: scroll)制作块,并将它们像内联块一样放置在彼此附近。这样,您将获得独立的可滚动内容。