jquery - 複数のスクロールdivを組み合わせる

Question

スクロール可能なdivを別のスクロール可能なdiv内に配置すると、問題が発生します。これがhtmlコードです

<div id="wrapper">
<div id="scroller" >
        <div id="wrapper1" style="height: 200px;">
            <div>
                <ul id="thelist1">
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>Pretty row 3</li>
                    <li>Pretty row 4</li>
                </ul>
            </div>
        </div>
        <div id="wrapper2" style="height: 200px;">
            <div>
                <ul id="thelist2">
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>Pretty row 3</li>
                    <li>Pretty row 4</li>
                </ul>
            </div>
        </div>
        <div id="wrapper3" style="height: 200px;">
            <div>
                <ul id="thelist3">
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>Pretty row 3</li>
                    <li>Pretty row 4</li>
                    <li>Pretty row 5</li>
                </ul>
            </div>
        </div>
        <div id="wrapper4" style="height: 200px;">
            <div>
                <ul id="thelist4">
                    <li>Pretty row 1</li>
                    <li>Pretty row 2</li>
                    <li>Pretty row 3</li>
                    <li>Pretty row 4</li>
                    <li>Pretty row 5</li>
                </ul>
            </div>
        </div>  
</div>

そして私はこれにiscrollプラグインを使用しています：

var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
myScroll1 = new iScroll('wrapper1');
myScroll2 = new iScroll('wrapper2');
myScroll3 = new iScroll('wrapper3');
myScroll4 = new iScroll('wrapper4');
}

問題は、内側のdivをスクロールするイベントが外側のdivのイベントと競合していることです。したがって、内側のdivの1つをスクロールすると、大きなラッパーdivを自分でスクロールしていることがわかります。

タッチしているdivのみをスクロールする方法はありますか？