Question

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 horizontal
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?

Answer 1

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!!!