在iOS webapp中的BODY上的类似native的动量滚动 [英] Native-like momentum-scrolling on BODY in iOS webapp

问题描述

根据本文 http://johanbrook.com/browsers/native -momentum-scrolling-ios-5 / 应该能够像下面这样启用本地风格滚动：

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

但是，这不会改变我的webapp中的任何东西。它滚动相同有或没有该属性。

我在一个可滚动的DIV上测试了它，但是我不想添加任何不必要的标记

任何提示？

更多信息 b
$ b

好吧，kind-of的工作原理如下：

  
 height：100％; 
 overflow：scroll; 
 -webkit-overflow-scrolling：touch; 
 position：relative; 
} 
  

然而，在BODY-当滚动停止时重新附加到它的正确位置。

任何人对此有任何意见？

小提琴：
http://jsfiddle.net/nMxEg/1/

解决方案

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

 < div id =fixedheader >< / div> 
  

According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:

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

However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.

I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.

Any tips?

Further info

Ok, it "kind-of" works like this:

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

however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?

Anyone having any input on this?

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

解决方案

Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.

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

这篇关于在iOS webapp中的BODY上的类似native的动量滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！