关于 Google 教程的问题：“实现固定位置 iOS Web 应用程序”
总之，
我正在开发一个 iOS 网络应用程序，它使用固定位置标题（很像 Gmail 的移动界面）。
由于移动浏览器忽略 position:fixed，这有点棘手。
然后，我找到了 Google 关于如何在移动版 Gmail 中实施此功能的优秀文章：
http: //code.google.com/mobile/articles/webapp_fixed_ui.html
唯一的问题 - 他们遗漏了几段关键代码（作为“读者练习”）。我不知道他们这样做是为了保护自己的代码，还是只是为了让教程简短。
无论如何，我已经能够填补大部分，但不是全部缺失的部分。我陷入困境的部分...如果动量使可滚动区域超过可滚动框架的边界该怎么办。
以下是文章的建议：
在我们的实现中，我们检测到这种情况并通过对多个转换进行排队来处理它。第一个过渡将我们带到边界，这里最终速度不为零，因此我们需要不同的三次贝塞尔计时函数。 第二个过渡稍微弹过边界，最终速度为零，因此我们可以使用上面所示的三次贝塞尔曲线计时函数。 第三个转换使用内置的缓出计时功能将内容减速回到边界。
这是有道理的，但有一些事情我无法弄清楚...
如何使用最终速度不为零的计时函数指定 webkit 转换？换句话说，当您使用三次贝塞尔曲线作为计时函数时，您只能指定中间的两个控制点 - 假定第一个 (0,0) 和最后一个 (1,1)。那么，最终速度不是总是为零吗？
如何计算到达边界时的速度应该是多少？
如果有人已经解决了这个细节，并且愿意分享它 - 那将不胜感激！
All,
I'm working on a web application for iOS that uses a fixed position header (much like Gmail's mobile interface).
Since mobile browsers ignore position:fixed, this is a little tricky.
Then, I found Google's excellent article on how they implemented it for the mobile version of Gmail:
http://code.google.com/mobile/articles/webapp_fixed_ui.html
The only problem - they left out several key pieces of code (as "exercises for the reader"). I don't know if they did this to protect their own code, or just to keep the tutorial short.
In any case, I've been able to fill in most, but not all of the missing pieces. The part I'm stuck on... what to do if the momentum takes the scrollable area past the boundaries of the scrollable frame.
Here's what the article suggests:
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.
That makes sense, but a few things I can't figure out...
How do you specify a webkit transition with a timing function in which the final velocity is NOT zero? In other words, when you use a cubic-bezier for the timing function, you can only specify the middle two control points - the fisrt (0,0) and last (1,1) are assumed. So, isn't the final velocity ALWAYS zero?
How do you calculate what the velocity SHOULD be when you reach the boundary?
If anyone has worked out the details of this, and is willing to share it - that'd be much appreciated!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
对于＃2，工作
边界处的速度为：
看起来您已经有了速度和加速度。一旦确定了到边界的距离，就可以开始了。
你找到#1了吗？
For #2, working off of
the velocity at the boundary would be:
It looks like you'll already have the velocity and acceleration. Once you figure out the distance to the boundary, you'll be good to go.
Did you figure out #1?
正如谣言网站所示，iOS5 的泄露表明不再需要变通办法。位置：固定即可。
As shown on rumour sites, leaks of iOS5 have shown that workarounds will be no longer necessary. position:fixed just works.
您可以使用
position:-webkit-sticky;。我最近发现我可以使用它，而且它非常棒。 （iOS 版本 6+，顺便说一句）You can use
position: -webkit-sticky;. I recently found that I could use it and it's been wonderful. (iOS version 6+, btw)