Have carousel iScroll inside an existing vertical

I am having trouble with implementing Carousel inside a vertical iScroll. Since the Carousel is horizontal scrolling and iScroll is vertical scrolling, its causing a glitch, in that Carousel scrolls vertical even if I disabled it.

I tried separating the two wrappers (ie....,...), but the problem is still there. Can someone tell me how to solve this.

(I am new to Javascript, so some kind of example would be great)

Here's my script:

var myScroll, myWipe; 
function loaded() { 
                myScroll = new iScroll('wrapper1'); 
                myWipe = new iScroll('wrapper2', { 
                snap: true, 
                momentum: false, 
                vscroll: false, 
                hscroll: true, 
                lockDirection: true, 
                hScrollbar: false, 
                onScrollEnd: function () { 
                        document.querySelector('#indicator > li.carouselSelect').className 
= ''; 
                        document.querySelector('#indicator > li:nth-child(' + 
(this.currPageX+1) + ')').className = 'carouselSelect'; 
                } 
         }); 
        }; 

window.addEventListener('load', loaded, false);

and my HTML:

<div id="wrapper1"> 
<div id="scroller1"> 
        <ul class="table-view table-action "> 
                <li></li> 
                <li></li> 

<!--myWipe--> 
<div id="wrapper2"> 
        <div id="scroller2"> 
                <ul> 
                    <li></li> 
                    <li></li> 
                    <li></li> 
                </ul> 
        </div> 
</div> 

<div id="nav"> 
        <div id="prev" onclick="myWipe.scrollToPage('prev', 0);return 
false">&larr; prev</div> 
        <ul id="indicator"> 
                <li class="carouselSelect">1</li> 
                <li>2</li> 
                <li>3</li> 
        </ul> 
        <div id="next" onclick="myWipe.scrollToPage('next', 0);return 
false">next &rarr;</div> 
</div><!--end myWipe--> 
</ul> 
</div><!--end #scroller1--> 
</div><!--end #wrapper1-->

回答1:

Here you go...

http://jsfiddle.net/manseuk/r9VL2/2/

A horizontal carousel inside a vertical scroll.

回答2:

Try moving your myWipe to the outside of the unordered list.

回答3:

If you're after multi-directional scrolling you can try Motus.js out.

*Disclaimer: I wrote the library.