iOS webapp 中 BODY 上的原生动量滚动答案

【问题标题】：Native-like momentum-scrolling on BODY in iOS webappiOS webapp 中 BODY 上的原生动量滚动
【发布时间】：2013-08-12 09:10:05
【问题描述】：

根据这篇文章http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ 应该能够像这样启用类似原生的动量滚动：

body{
        -webkit-overflow-scrolling: touch;
    }

但是，这不会改变我的 web 应用程序中的任何内容。无论有没有该属性，它都滚动相同。我预计会像原生应用一样拥有更长的发展势头。

我在一个可滚动的 DIV 上对其进行了测试，它有效 - 但我不想为此添加任何不必要的标记。

有什么建议吗？

更多信息

好的，它“有点”像这样工作：

html, body {
    height:100%;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    position:relative;
}

但是，任何带有 position:fixed 的 BODY-tag 都会在滚动时移动，并在滚动停止时重新附加到正确的位置。我可以做些什么来解决这个问题吗？

有人对此有意见吗？

【问题讨论】：

position:relative; 是干什么用的？
删除或更改后会发生什么？
@SantaClaus 不会改变任何东西。在上面添加了一个小提琴（我怎样才能获得只在 iOS 上测试的结果页面的直接链接？）
因为这个原因我讨厌 jsfiddle。这个例子有效吗？：playground.johanbrook.com/css/touchtest.html 如果有效，我可以在 jsfiddle 中将其代码与您的代码进行比较。
我明白为什么要求和必要。看，iOS Safari 默认添加了一个底部快速链接导航栏，“隐藏”该栏的唯一方法是滚动正文。滚动正文也会缩小 URL 栏。使用滚动 div 不会产生相同的效果。而且，由于滚动正文在 Android 上运行良好，而且势头强劲，基本上 OP 要求在 iOS 中具有相同的响应能力。我有同样的问题。添加额外的标记不会摆脱底部的快速链接栏或缩小 URL 栏。主体必须滚动才能获得额外的屏幕空间。

【解决方案1】：

使用具有设定高度的 div，并在 div 上使用 touchscroll 执行滚动。页眉和页脚可以在 DOM 中保持为同一级别的固定 div。

<div id="fixedheader"></div>

【讨论】：

【解决方案2】：

很遗憾，iOS 不完全支持fixed。 http://caniuse.com/css-fixed

【讨论】：