Have carousel iScroll inside an existing vertical iScroll

Question

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

Answer 1

Here you go...

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

A horizontal carousel inside a vertical scroll.

Answer 2

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

*Disclaimer: I wrote the library.

Answer 3

尝试将myWipe移到无序列表的外部。