css iphone and scroll to reload

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
<div class="device">
    <div class="speaker"></div>
    <div class="pageWrap">
        <div class="nav">
            <div class="btn icon home">
                
            </div>
            <div class="btn icon profile">
                
            </div>
            <div class="btn icon trophy">
                
            </div>
            <div class="btn icon gear">
                
            </div>
        </div>
        <div class="page prev"></div>
        <div class="page current">
            <div class="loading">
                Loading...
            </div>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
                <li>Item 7</li>
                <li>Item 8</li>
                <li>Item 9</li>
                <li>Item 10</li>
                <li>Item 11</li>
            </ul>
        </div>
        <div class="page next"></div>
    </div>
    <div class="homeButton">
        &#9633;
    </div>
</div>

CSS

body {
    height: 100%;
}

.device {
    background-color: black;
    background: #000000; /* Old browsers */
    background: -webkit-linear-gradient(45deg, #000000 0%, #7d7e7d 48%, #7d7e7d 56%, #0e0e0e 100%);
    background: -moz-linear-gradient(45deg, #000000 0%, #7d7e7d 48%, #7d7e7d 56%, #0e0e0e 100%);
    background: -o-linear-gradient(45deg, #000000 0%, #7d7e7d 48%, #7d7e7d 56%, #0e0e0e 100%);
    background: linear-gradient(45deg, #000000 0%, #7d7e7d 48%, #7d7e7d 56%, #0e0e0e 100%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    padding: 25px 10px 35px 10px;
    position: absolute;
    height: 100%;
    max-height: 480px;
    width: 35%;
    max-width: 320px;
    left: 35%;
    box-sizing: border-box;
    border-radius: 10px;
}

.speaker {
    height: 10px;
    width: 10%;
    border-radius: 5px;
    background-color: black;
    position: absolute;
    top: 5px;
    left: 45%;
    right: 45%;
    
    background: #0e0e0e; /* Old browsers */
background: -moz-linear-gradient(top,  #0e0e0e 1%, #7d7e7d 87%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#0e0e0e), color-stop(87%,#7d7e7d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #0e0e0e 1%,#7d7e7d 87%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #0e0e0e 1%,#7d7e7d 87%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #0e0e0e 1%,#7d7e7d 87%); /* IE10+ */
background: linear-gradient(to bottom,  #0e0e0e 1%,#7d7e7d 87%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0e0e', endColorstr='#7d7e7d',GradientType=0 ); /* IE6-9 */

    
    
}

.homeButton {
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: black;
    margin-left: auto;
   ...

JavaScript

var loaderClass = '.loading';
//Don't do scroll to reload until user has scrolled down, or x seconds have passed 
var canScrollToReload = false;

$(function(){
    
    var loaderHeight = $(loaderClass).height();
    console.log("loader height ", loaderHeight, $('.page.current').scrollTop());
//    $('.page.current').scrollTop(loaderHeight);
    
    $('.page.current').animate({ scrollTop: loaderHeight })
    
    window.setTimeout(function(){
        console.log('after animation ', $('.page.current').scrollTop());
    }, 1000);
    
    
    $('.page.current').mousewheel(function(e, delta){
        mouseWheelHandler(e, delta);
    });
    
});

function scrollToReload(){
    
    var loaderHeight = $(loaderClass).height();
    window.setTimeout(function(){
        $('.page.current').animate({ scrollTop: loaderHeight });
        canScrollToReload = false;
    }, 2000);
}



function mouseWheelHandler(e, delta) {

    var scrollTop = $('.page.current').scrollTop();
    var scrollDest = scrollTop + (delta * 30);

    if (delta < 0) {
        console.log("delta is less than 0");
        var loaderHeight = $(loaderClass).height();
        
        if (!canScrollToReload && (scrollDest < loaderHeight)) {
            console.log('scrollTo reload : false ');
            $('.page.current').scrollTop(loaderHeight);
        } 
        else if (canScrollToReload && (scrollDest < loaderHeight)) {
            scrollToReload();
            $('.page.current').scrollTop(0);
        }
        else {
            $('.page.current').scrollTop(scrollTop + (delta * 30));
        }
    } else {
    
        canScrollToReload = true;
        $('.page.current').scrollTop(scrollTop + (delta * 30));
        
    }
    
}