Iscroll fixed header footer

by Khaled Awad

HTML

<script src="http://cubiq.org/dropbox/iscroll4/src/iscroll.js"></script>
<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 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>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>

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:60px;
left: 0;
width: 100%;
background: #aaa;
overflow: auto;
}

JavaScript

myScroll = new iScroll('wrapper', {
	
	
	onBeforeScrollStart : function(e) { 
		e.stopPropagation();
    }});
myScroll2 = new iScroll('inWarper' , {
	
	
	onBeforeScrollStart : function(e) { 
		e.stopPropagation();
    }});