<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/jquery.js"></script>
<script>
$(function () {
var startY=endY=0;
//手勢開始滑動
$('body').on('touchstart',function(e) {
var touch = e.originalEvent.targetTouches[0];
startY = touch.pageY;//開始點在頁面的 y 座標
console.log('---->'+startY);
});
//手勢正在滑動
$('body').on('touchmove',function(e) {
var touch = e.originalEvent.targetTouches[0];
var y= touch.pageY;
});
//手勢滑動結束
$('body').on('touchend',function(e) {
var touch = e.originalEvent.changedTouches[0];
var endY = touch.pageY;//滑動結束時在頁面的 y 座標
//根據開始和結束的座標差就能知道是上滑還是下滑
console.log(startY-endY);
var cha=startY-endY;
if(cha<-10){
//下滑 上一頁
console.log('下滑==========>'+cha)
}else if(cha>10){
//上滑 下一頁
console.log('上滑==========>'+cha)
}
});
});
</script>
<style>
*{marign:0px;padding:0px;}
#main{width:100%;height:1024px;background-color:#00b7ee;}
</style>
</head>
<body>
<div id="main" >
</div>
</body>
</html>
上面是整體滑動的效果
如果要在滑動效果上，又有內容需要有滾動條，就需要禁止這個標籤的滑動事件(jquery寫法)
$('#removes').on('touchend',function (event) {
return false;
});
