jQueryでフリックしてページ遷移。縦スクロール可能

jQuery

参考とさせていただいたソースは下記


フリック動作でページ遷移させる
http://blog.nagachan.net/archives/88


こちらのソースだと、コンテンツが長い場合に縦スクロールができなくなるので、
その点を改良してみたソースが下記。

flick.js

$(function() {
 
    //イベントの取得
    $("#main").bind("touchstart touchmove touchend", touchHandler);
 
    function touchHandler(e) {
        e.preventDefault();
        var touch = e.originalEvent.touches[0];  
        var id;
 
        if (e.type == "touchstart") {   //画面にタッチした
 
         clearInterval(id);
         
            //タッチ開始時のX座標（ startX ）
            startX = touch.pageX; 
 
            //タッチ開始時のY座標（ startY ）
            startY = touch.pageY; 
 
 
        } else if (e.type == "touchmove") { //画面をスライドした
 
            //スライド時のX座標 - 開始時のX座標 = 移動距離（ diffX ）
            diffX = touch.pageX - startX;

            //スライド時のY座標 - 開始時のY座標 = 移動距離（ diffY ）
            diffY = touch.pageY - startY;
 
            //移動距離がマイナス（右方向にフリック）し、移動先のページがあるか
            //移動距離がプラス　（左方向にフリック）し、移動先のページがある場合
            if (( diffX > 0 && prevPageURL ) || ( diffX < 0 && nextPageURL)) {
 
                //コンテンツエリアをフリックした分だけ移動
                $('#container').css( "left", diffX );
            }

            //Y座標の移動
            if (( diffY != 0 )) {
 
                //コンテンツエリアをフリックした分だけ移動
                //$('html, body').css( "top", diffY );
                //$(window).scrollTop(diffY + startY);
                $(window).scrollTop($(window).scrollTop() - diffY);
            }

 
        } else if (e.type == "touchend") { //画面から指を離した
 
            if (diffX > 100) { //右に100px以上移動したか
 
                if ( prevPageURL ) { //移動先のページがあれば、移動
                    location.href = prevPageURL;
                }
            } else if (diffX < -100) { //左に100px以上移動したか
 
                if ( nextPageURL ) { //移動先のページがあれば、移動
                    location.href = nextPageURL;
                }
            } else { //左右100px以下の移動距離であれば、スライドして元の位置に戻る。
                    $( '#container' ).animate({ left: 0 }, 200);
            }

      id = setInterval(function() {
      var top = $(window).scrollTop();
      $(window).scrollTop(top - diffY / 4 );
      if (top == $(window).scrollTop()) {
        clearInterval(id);
      }
    }, 10);


        }
    }  
 
});


html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Script-type" content="text/javascript">
<meta http-equiv="Content-Style-type" content="text/css">
<title>index2</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="flick.js" type="text/javascript" charset="utf-8"></script>
<script>
var prevPageURL = "index.html";
var nextPageURL = "index3.html";
</script>

<style>
  article, aside, dialog, figure, footer, header,
  hgroup, menu, nav, section { display: block; }
</style>
</head>
<body>

<div id="container">

<div id="header">
</div>

	<div id="main">
		<p>index2</p>
	</div>

<div id="footer">
</div>

</div>

</body>
</html>


main.css

div#container {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

div#main {

	width: 100%;
	height: 1000px;
	background: #ddd;
}

div#header {
	height: 80px;
}

ただ、iphoneだとスクロールバーがでない。androidだと出る。
あと基本動作が鈍いので改良の余地あり。
コンテンツが入るとさらに重くなる。