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だと出る。
あと基本動作が鈍いので改良の余地あり。
コンテンツが入るとさらに重くなる。