iOS网页应用中实现类似原生的BODY滚动效果

Question

根据这篇文章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;
}

然而，在BODY标签中具有position:fixed的任何元素都会在滚动时移动，并在滚动停止时重新附加到其正确位置。我能做些什么来解决这个问题吗？

有没有人对此有任何意见？

Fiddle: http://jsfiddle.net/nMxEg/1/

- Raphael Jeger

---

position:relative; 是用来做什么的？ - Andrew

让我理解一下 - 所以基本上你可以让动量滚动起作用，但是你想要固定在顶部的那个栏不会保持固定状态，并且每次滚动时都会重新附加，但是你希望该栏在动量滚动列表时保持固定？另外，你可以在iPad上测试你的jsfiddle结果：http://jsfiddle.net/nMxEg/1/embedded/result/。 - Vrashabh Irde

没错！完全正确。 - Raphael Jeger

我真的不明白“不必要的标记”在这里到底适用于哪些地方。我不明白为什么你不能只使用有效的代码（你说过的那个有效），并且只是接受一些额外的代码行。如果你还坚持认为这是不必要的标记，也许可以重新表达你的问题为“有没有办法避免这些额外的代码行”，或者只是使用有效的代码。 - Andrew

我理解为什么这是必要的。你知道，iOS Safari默认会添加底部快速链接导航栏，唯一隐藏该栏的方法是滚动页面主体。滚动页面主体还会缩小URL栏。但使用滚动div不会产生同样的效果。而且，在Android上滚动主体可以平稳运行，因此OP基本上要求iOS具有相同的响应性。我也遇到了同样的问题。添加附加标记将无法消除底部快速链接栏或缩小URL栏。页面主体必须滚动以获得更多屏幕空间。 - Lazerblade

Answer 1

使用一个高度固定的div，并通过对该div执行touchscroll来滚动。页眉和页脚可以保持为DOM中相同级别的固定div。

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

- Larry Leonidas

Answer 2

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

- Petercopter