有关Google教程的问题:“实施固定位置iOS Web应用程序”

时间:2011-05-11 20:00:48

标签: css ios web-applications webkit css-position

所有

我正在开发一个使用固定位置标头的iOS网络应用程序(很像Gmail的移动界面)。

由于移动浏览器会忽略position:fixed,因此这有点棘手。

然后,我发现了Google关于如何为移动版Gmail实施该文章的优秀文章:

http://code.google.com/mobile/articles/webapp_fixed_ui.html

唯一的问题 - 他们遗漏了几个关键代码(作为“读者练习”)。我不知道他们是这样做是为了保护他们自己的代码,还是只是为了让教程简短。

无论如何,我已经能够填补大部分,但不是所有缺失的部分。我坚持的部分......如果动量使可滚动区域超过可滚动框架的边界,该怎么办。

以下是文章的建议:

  

在我们的实现中,我们检测到这种情况并通过排队几个转换来处理它。第一次过渡将我们带到边界,这里最终速度不为零,因此我们需要一个不同的立方贝塞尔定时函数。   第二个过渡点稍微超过边界,最终速度为零,因此我们可以使用上面显示的三次贝塞尔定时函数。   第三个转换使用内置缓出计时功能将内容减速回边界。

这是有道理的,但有一些我无法弄清楚的事情......

  1. 如何使用定时函数指定webkit转换,其中最终速度不为零?换句话说,当您使用cubic-bezier作为计时函数时,您只能指定中间的两个控制点 - 假设为fisrt(0,0)和last(1,1)。那么,最终速度是不是总是为零?

  2. 如何计算到达边界时的速度应该是多少?

  3. 如果有人弄清楚了这个细节,并愿意分享它 - 那将非常感激!

3 个答案:

答案 0 :(得分:1)

对于#2,正在处理

  

v f 2 =   v i 2 + 2 * a * d

边界处的速度为:

  

var velocityAtBoundary =(Math.sqrt(Math.pow(velocity,2)+(2 * acceleration * distanceToBoundary)))*((velocity> 0)?1:-1);

看起来你已经拥有了速度和加速度。一旦你弄明白到边界的距离,你就会好起来。

你有没有想出#1?

答案 1 :(得分:0)

如谣言网站所示,iOS5的漏洞已经表明将不再需要解决方法。位置:固定只是工作。

答案 2 :(得分:0)

您可以使用position: -webkit-sticky;。我最近发现我可以使用它并且它已经精彩。 (iOS版本6+,顺便说一句)