Search code examples
jquerycordovascrollmicrosoft-metroarea

JQuery with MetroUI theme and scroll areas

I am playing around with JQuery and PhoneGap, using the MetroUI theme for my WP7.5 phone. I noticed the app and settings bar are scrolling with the content when flicking up and down, then redrawn once the scrolling comes to a stop. That makes it stand out like a cheap Metro UI imitation... So how can I do something about this? Basically I want to divide the screen up into 3 areas, of which only one of them is scrolable.

I played around with the CSS files and got something working, check out http://jsfiddle.net/mcsmarte/dNLA7/ but when taking it into use, the areas I don't want to move are placed correctly, but the entire screen still scrolls. Any hints or advice?

Solution

  • Like change the one div css to be like this:

    .context{
    width:100%;
    height:350px;
    margin-top:40;
    margin-bottom:40;
    overflow: auto;
    }

    http://jsfiddle.net/webwarrior/dNLA7/6/

    If I understood correctly...