scrolling absolutes with iscroll

by amindunited

HTML

<div class="container">
    <div class="pageWrap">
        <div class="page">
            <div class="header">Header</div>
            <div class="fauxHeader"></div>
            <div class="pageBody">
                <ul>
                    <li>01</li>
                    <li>02</li>
                    <li>03</li>
                    <li>04</li>
                    <li>05</li>
                    <li>06</li>
                    <li>07</li>
                    <li>08</li>
                    <li>09</li>
                    <li>10</li>
                    <li>11</li>
                    <li>12</li>
                    <li>13</li>
                    <li>14</li>
                    <li>15</li>
                    <li>16</li>
                    <li>17</li>
                    <li>18</li>
                    <li>19</li>
                    <li>20</li>
                </ul>
            </div>
            <div class="footer">foot</div>
        </div>
    </div>
</div>



<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>

CSS

div {
    border: solid 1px green;
}
.container {
    border: solid 1px pink;
    height: 100%;
    padding-bottom:20px;
    //overflow: hidden;
    width: 100%;
    position: absolute;
}
.header {
    position: fixed;
    top: 1px;
    left: 0%;
    width: 100%;
}
.footer {
    position: fixed;
    bottom: 1px;
    left: 0%;
    width: 100%;
}
.page {
    box-sizing: border-box;
    padding: 0px;
    padding-top:-20px;
    padding-bottom: -40px;
    border: solid 1px blue;
    height: 100%;
}

.pageWrap {
    border: solid 1px yellow;
    height: 100%;
}
.pageBody ul li:last-child{
    padding-bottom: 20px;
}
.fauxHeader {
    height: 15px;
    background-color: red;
    width: 100%;
    float: left;
}
.pageBody {
    
    box-sizing: border-box;
    //overflow: hidden;
    /*position: relative;*/
    top: 30px;
    height: 100%;
    width: 100%;
    padding-bottom: 0px;
}

JavaScript

var myScroll = new IScroll('.pageBody', {
    mouseWheel: true,
    scrollbars: false
});
myScroll.on('scrollEnd', function(e){
    console.log('the scroll ended ', this);
});