css - 关于谷歌教程: "Implementing a Fixed Position iOS Web Application"的问题

Question

全部，

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

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

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

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

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

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

这是文章的建议:

In our implementation we detect this case and handle it by queueing up several transitions. The first transition takes us to the boundary, here the final velocity is not zero so we need a different cubic-bezier timing function. The second transition bounces past the boundary a little bit, the final velocity is zero so we can use the cubic-bezier timing function shown above. The third transition decelerates the content back to the boundary using the build in ease-out timing function.

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

1. 如何指定带有最终速度不为零的计时函数的 webkit 转换？换句话说，当您将三次贝塞尔曲线用于计时函数时，您只能指定中间的两个控制点 - 假定第一个 (0,0) 和最后一个 (1,1)。那么，最终速度不是始终为零吗？

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

如果有人已经弄清楚了这方面的细节并愿意分享它 - 将不胜感激!

Answer 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了吗？