Cordova / Phonegap: Disable bounce only for header and footer

Question

I'm using this property inside the config.xml to disabe the bouncing of the webview (iOS):

<preference name="DisallowOverscroll" value="true" />

This works as expected. But what if I only want to disable this bouncing for my header and footer? They are fixed at the top and bottom of my app, so I don't want them to bounce. But it would be more like a native feeling (especially for lists) when the inner container still has this bounce effect.

• Is there any way to achieve this? My header and my footer should not bounce, but my inner container should bounce.
• And is there also an iOS / Android cross compatible way?

Answer 1

Just keep using

<preference name="DisallowOverscroll" value="true" />

and in your CSS use the following code on your scrollable wrapper:

-webkit-overflow-scrolling: touch;

It will give this bouncy effect to the scrollable content.

overflow: hidden on your header and footer to avoid the user to scroll on it and overflow:scroll on your content plus the css webkit scrolling touch.

Here is a JSFiddle LIVE DEMO : http://jsfiddle.net/mPfeQ/

:You should test it on a mobile device (it won't render on a computer) ：您应该在移动设备上测试它（它不会在计算机上渲染）

Answer 2

Hi simple add these CSS rules to list or scrolable elemet

  overflow: scroll;
  -webkit-overflow-scrolling: touch;

-webkit-overflow-scrolling: touch; will give bounce effect to scrollling area (native look)