html - Iscroll inside Iscroll - nested iscroll unexpected behavior -

html - Iscroll inside Iscroll - nested iscroll unexpected behavior -

i have 2 lists utilize iscroll vertical scrolling.

the sec list inside first list.

when scroll sec list first list scrolling. want when scroll within list (the sec list) main list (the first list) not scroll.

how can that?

here example:

<div id="wrapper" style="overflow: hidden;"> <div id="scroller"> <ul id="thelist"> <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> <li>pretty row 6</li> <li id='inwarper'> <div id="scroller"> <br/> <ul> <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> <li>pretty row 6</li> <li>pretty row 7</li> <li>pretty row 8</li> <li>pretty row 9</li> <li>pretty row 10</li> </ul> </div> </li> <li>pretty row 7</li> <li>pretty row 8</li> <li>pretty row 9</li> <li>pretty row 10</li> <li>pretty row 11</li> <li>pretty row 12</li> <li>pretty row 13</li> <li>pretty row 14</li> <li>pretty row 15</li> <li>pretty row 16</li> <li>pretty row 17</li> <li>pretty row 18</li> </ul> <br/> </div> </div>

and in load event:

myscroll = new iscroll('wrapper'); myscroll2 = new iscroll('inwarper');

css:

#scroller ul { list-style: none; padding: 0; margin: 0; width: 100%; text-align: left; } #scroller { position: absolute; z-index: 1; /* -webkit-touch-callout: none; */ -webkit-tap-highlight-color: rgba(0,0,0,0); width: 100%; padding: 0; } #wrapper { position: absolute; z-index: 1; top: 45px; bottom: 48px; left: 0; width: 100%; background: #aaa; overflow: auto; height:150px; } #inwarper { color:red; position: absolute; z-index: 1; height:100px; left: 0; width: 100%; background: #aaa; overflow: auto; }

jsfiddle: http://jsfiddle.net/pptws/64/

the thought prepare problem prevent (stop) propagation of scrolling firing event parent div

this how prepare

myscroll = new iscroll('wrapper'); myscroll2 = new iscroll('inwarper' , { onbeforescrollstart : function(e) { e.stoppropagation(); }});

example http://jsfiddle.net/khaledalyawad/4p7t8ymp/

html jquery-mobile iscroll iscroll4