WP8 Nested Scrollers Research

by tabalinas

HTML

<div class="container outer">
    <div class="content">
        <div class="container inner">
            <div class="content">
                
            </div>
        </div>
    </div>
</div>

CSS

.container {
    position: relative;
    border: 1px solid gray;
    width: 100%;
    height: 700px;
    overflow: auto;
}

.container.outer {
   -ms-touch-action: pan-y;
}

.container.inner {
   -ms-touch-action: pan-x;
}

.content {
    padding-top: 200px;
    background-image: linear-gradient(to bottom, #AAAAFF, #AAFFAA, #AAFFFF, #FFAAAA, #FFAAFF, #FFFFAA);
    width: 100%;
    height: 200%;
}

JavaScript

$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1" />');