ios scroll

[Joe Sharples]

I've been searching on GS and google for a solution but i haven't found what i'm looking for yet.

by default when you reach the end of a scroll the header or footer bounces to reveal a grey area above or below.

I have found posts suggestiong to add this code to the config.xml:

preference name="DisallowOverscroll" value="true"
preference name="UIWebViewBounce" value="false"
preference name="webviewbounce" value="false"

This disables the the bouncing affect for all the page which is good because it keeps the header and footer fixed.

But to get an ios native feel i want the container to bounce when a users reaches the bottom of the scroll.

I tried adding this class to the mobilecontainer
pre.scrollingArea
{
overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
/pre
this didnt seem to do anything.

but if i removed the '-y' and changed it to
pre
.scrollingArea
{
overflow: scroll !important;
-webkit-overflow-scrolling: touch !important;
}
/pre

the scroll for the y still acted the same as before ( stopping at the end of the scroll with no bounce ) but I was able to scroll on the x and the mobilecontainer bounced along the x axis.

my desired result is to have the footer and header always remaining fixed but i want the mobilecontainer to bounce when the the user overscrolls along the y.

Any suggestion here?

thank you

[Joe Sharples]

I've read that it's not working because i'm missing the height in the css class.
http://stackoverflow.com/questions/17...

I have tried adding a height with a set amount of px. It works but it's a bit glitchy. because my mobilecontainer has dynamic list so I need a way to set the height dependant on the height of the list. I tried 100% and auto, neither worked correctly.

how can i achieve this?

[Joe Sharples]

I feel i have found a solution but need apperyio help on one final thing.

adding position:fixed gave me the desired result.
pre
.scrollingAreaP
{

overflow-y: scroll !important;
-webkit-overflow-scrolling: touch !important;
height: 100% !important;
position: fixed !important;
}
/pre

but now the footer seems to overlap the bottom of the mobilecontainer.
meaing the very last list item is covered. approximately 50px.

I tried adding padding-bottom to the container, this didnt work. i tried adding a margin-bttom to the list, this didnt work either.

any suggestions?

[Serhii Kulibaba]

Hello Joe,

You have to add attribute margin-top for the container, e.g.:
pre[name="mobilecontainer"]{
margin-top:50px;
}/pre