javascript - 静态定位的控制栏，例如 Gmail for iPhone Web 应用程序？

Question

当使用 iPhone 查看 Gmail 时，他们对其进行了设置，以便在屏幕顶部有一个静态定位的控制栏。即使您在页面上上下滚动，它也不会移动。我很好奇是否有人知道他们是如何设置的。

据我过去所知，不可能在 iPhone 的 Safari 上使用 CSS 创建固定控件。相反，它必须是你用 Javascript 破解的东西。相同的技术是否适用于 Android 的浏览器？

想法？想法？谢谢。

Answer 1

一般来说，它的工作方式是通过覆盖 JavaScript 触摸处理程序来阻止网页中的默认滚动机制。然后在触摸处理程序中，您手动计算触摸物理并在 JavaScript 中定位内容。

• 由于您询问了 Gmail 的实现，值得注意的是 Gmail 团队在此处发布了有关其实现的博客:http://code.google.com/mobile/articles/webapp_fixed_ui.html
• 其他张贴者提到的 iScroll 可能是最著名的开源实现:http://cubiq.org/iscroll
• Apple 自己的实现被称为 PastryKit，但它没有很好的文档记录，也不是开源的:http://daringfireball.net/2009/12/pastrykit

更新:我刚刚重读了这个问题，发现你问的是关于 Android 的问题(哦!)。看起来 Android 2.2 添加了对 CSS 的支持:http://kentbrewster.com/android-scroller/