Vertical scrollview containing a horizontal scrollview

I'm trying to achieve the same behavior as in the Apple AppStore when viewed on iPhone; a page with a long text description and containing a ho开发者_如何转开发rizontal scrollview with screenshots.

1. You scroll the page up and down when you move your finger up/down.
2. You scroll the screenshots sideways when you move your finger sideways within the screenshots div.
3. You scroll both the page and the screenshots if you do both movements within the screenshots div.

The the iscroll code solves 1 and 2. But I could not figure out how to solve 3.

How can 1+2+3 be solved?

iscroll 4 does it perfectly. let me write you what i did (based on the iscroll example)

<script type="text/javascript" src="js/iscroll.js"></script>

<script type="text/javascript">

var myScroll;
var myScrollb;
function loaded() {
    myScroll = new iScroll('wrapper');
    myScrollb = new iScroll('wrapperb');
 }

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', loaded, false);


</script>

then.. the css

body,ul,li {
    padding:0;
    margin:0;
    border:0;
}

body {
    font-size:12px;
    -webkit-user-select:none;
    -webkit-text-size-adjust:none;
    font-family:helvetica;
}

#header {
    position:absolute; z-index:2;
    top:0; left:0;
    width:100%;
    height:45px;
    line-height:45px;
    background-color:#d51875;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
    background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
    padding:0;
    color:#eee;
    font-size:20px;
    text-align:center;
}

#header a {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:bold;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}

#footer {
    position:absolute; z-index:2;
    bottom:0; left:0;
    width:100%;
    height:90px;
    background-color:#222;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
    background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
    background-image:-o-linear-gradient(top, #999, #666 2%, #222);
    padding:0;
    border-top:1px solid #444;
}

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:90px; left:0;
    width:100%;
    background:#aaa;
    overflow:auto;
}


.horizontala{
    width:300px;
    position:relative;

}
#horizontal{height:80px;  overflow: auto; positon:absolute; top:0px; left:0px;}

#scroller {
    position:absolute; z-index:1;
/*  -webkit-touch-callout:none;*/
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    width:100%;
    padding:0;
}

#scroller ul {
    list-style:none;
    padding:0;
    margin:0;
    width:100%;
    text-align:left;
}

#scroller li {
    padding:0 10px;
    height:40px;
    line-height:40px;
    border-bottom:1px solid #ccc;
    border-top:1px solid #fff;
    background-color:#fafafa;
    font-size:14px;
}

#myFrame {
    position:absolute;
    top:0; left:0;
}

#wrapperb {
      z-index:1;
    width:100%;
    background:#000;
    overflow:auto;
    padding-top:20px;
    padding-bottom:20px;
}

#scrollerb {
    width:2040px;
    height:100%;
    float:left;
    padding:0;
}

#scrollerb ul {
    list-style:none;
    display:block;
    float:left;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    text-align:left;
}

#scrollerb li {
    display:block;
    vertical-align:middle;
    float:left;
    padding:0 10px;
    width:65px;
    height:100%;
    background-color:#000;
    font-size:14px;
    border:none !important;
}

and finally the xhtml

<div id="header"><a href="index.php">test</a></div>
<div id="wrapper">
    <div id="scroller">
<p>
Lorem ipsum (paste a really extense text here so you can see the behavior)</p>
<div id="wrapperb">
    <div id="scrollerb">
        <ul id="thelistb">

            <li><img src="img/1.jpg" alt=" Portfolio"  ></li>
              ...
            <li><img src="img/16.jpg" alt=" Portfolio"  ></li>


        </ul>
    </div>
</div>
    </div>

</div>



<div id="footer">
copyright blah blah
</div>

its a quick example, it works nice and smooth, be carefull with wrapper and wrapperb elements... the horizontal scroll has a b after the id..

hope it works for someone! =D

enjoy!!!