关于谷歌教程的问题：“Implementing a Fixed Position iOS Web Application”答案

【问题标题】：Question about Google's tutorial: "Implementing a Fixed Position iOS Web Application"关于谷歌教程的问题：“Implementing a Fixed Position iOS Web Application”
【发布时间】：2011-08-23 14:49:50
【问题描述】：

全部，

我正在开发一个用于 iOS 的网络应用程序，它使用固定位置的标题（很像 Gmail 的移动界面）。

由于移动浏览器忽略position:fixed，这有点棘手。

然后，我找到了 Google 关于他们如何为移动版 Gmail 实现它的优秀文章：

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

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

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

这篇文章的建议如下：

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

这很有道理，但有些事情我想不通......

如何使用最终速度不为零的计时函数指定 webkit 转换？换句话说，当您对计时函数使用三次贝塞尔曲线时，您只能指定中间的两个控制点——假设为第一个 (0,0) 和最后一个 (1,1)。那么，最终速度不总是为零吗？
如何计算到达边界时的速度应该是多少？

如果有人解决了这方面的细节，并愿意分享 - 那将不胜感激！

【问题讨论】：

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

【解决方案1】：

对于＃2，工作

v_f² = v_i² + 2*a*d

边界处的速度为：

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

看起来你已经有了速度和加速度。确定到边界的距离后，您就可以开始了。

你找到#1了吗？

【讨论】：

马克 - 抱歉延迟回复。我已经放弃了得到答案，所以我没有经常检查。无论如何，感谢您的回复。但是，由于我还没有找到#1 的答案，所以它有点没有实际意义。实际上（希望）完全没有实际意义，因为传闻 iOS5 支持 position:fixed，这避免了我们编写自己的解决方案的需要。

【解决方案2】：

如谣言网站所示，iOS5 的泄漏表明将不再需要变通办法。 position:fixed 就可以了。

【讨论】：

-1 希望我能对此投反对票，因为位置：固定，不只是工作。如果您专注于固定位置元素中的输入，则虚拟键盘会出现并且位置：固定中断并切换到相对。这是在 iOS6 中

【解决方案3】：

您可以使用position: -webkit-sticky;。我最近发现我可以使用它，而且它很棒。（iOS 版本 6+，顺便说一句）

【讨论】：