纯js实现移动端H5上下翻页_原生js实现手机页面上下翻页 csdn-CSDN博客

本文链接：https://blog.csdn.net/qq_42894622/article/details/90548504
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=640, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-title" content="">
<title>H5-test</title>
<style>
*{ margin:0px; padding:0px; box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0);}
html{ max-width:640px; margin:0 auto;}
body{ font-family:"PingFangSC-Regular","sans-serif","STHeitiSC-Light","微软雅黑","Microsoft YaHei"; font-size:50px; line-height:1.5em; color:#212121;
    -webkit-user-select:none; user-select:none;
    -webkit-touch-callout:none; touch-callout:none;
}
html , body , .page_box{ width:100%; height:100%; position:relative; overflow:hidden;}
.page{ background-color:#eee;}
.page{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; height:100%; position:absolute; left:0; top:0; overflow:hidden;}
.page.hide{ display:none;}
 
/*==================================*/
 
.page.inTop{
            -webkit-animation:ShowTop .5s ease-out both;
					animation:ShowTop .5s ease-out both;
}
.page.outTop{
            -webkit-animation:HideTop .5s ease-out both;
					animation:HideTop .5s ease-out both;
}
.page.inDown{
            -webkit-animation:ShowDown .5s ease-out both;
					animation:ShowDown .5s ease-out both;
}
.page.outDown{
            -webkit-animation:HideDown .5s ease-out both;
					animation:HideDown .5s ease-out both;
}
@-webkit-keyframes ShowTop{
	0%{ -webkit-transform:translateY(100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowTop{
	0%{ transform:translateY(100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideTop{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(-100%);}
}
@keyframes HideTop{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(-100%);}
}
@-webkit-keyframes ShowDown{
	0%{ -webkit-transform:translateY(-100%);}
	100%{ -webkit-transform:translateY(0);}
}
@keyframes ShowDown{
	0%{ transform:translateY(-100%);}
	100%{ transform:translateY(0);}
}
@-webkit-keyframes HideDown{
	0%{ -webkit-transform:translateY(0);}
	100%{ -webkit-transform:translateY(100%);}
}
@keyframes HideDown{
	0%{ transform:translateY(0);}
	100%{ transform:translateY(100%);}
}
 
/*==================================*/
 
.arrow{ width:70px; height:56px; line-height:56px; text-align:center; font-size:50px; font-weight:bold; color:#d00; position:absolute; left:285px; bottom:10px;
			-webkit-animation:arrow 1.2s .5s ease-in-out infinite;
					animation:arrow 1.2s .5s ease-in-out infinite;
}
@-webkit-keyframes arrow{
	0%{ -webkit-transform:translateY(0); opacity:1;}
	100%{ -webkit-transform:translateY(-50%); opacity:0}
}
@keyframes arrow{
	0%{ transform:translateY(0); opacity:1;}
	100%{ transform:translateY(-50%); opacity:0}
}
</style>
</head>
 
<body>
 
<div class="page_box">
    <div class="page page1">
    	<div style="width:80%; height:100px; line-height:100px;">标题标题标题标题</div>
        <div id="inbox" style="width:80%; height:60%; overflow-y:auto; -webkit-overflow-scrolling:touch;">
            <p>行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容行内滚动内容</p>
        </div>
    </div>
    
    <div class="page page2 hide">
        <div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
            <div>22222222222</div>
        </div>
    </div>
    
    <div class="page page3 hide">
        <div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
            <div>33333333333</div>
        </div>
    </div>
    
</div>
 
<div class="arrow">∧</div>
 
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var curPage = 1;
var PageL = $('.page_box .page').length;
var canTouch = false;
canTouch = true;
 
var startY , endY , diff;
//document.body.addEventListener("touchstart", touchStart, false);
//document.body.addEventListener("touchmove", touchMove, false);
//document.body.addEventListener("touchend", touchEnd, false);
$('.page_box').on('touchstart',touchStart);
$('.page_box').on('touchmove',touchMove);
$('.page_box').on('touchend',touchEnd);
function touchStart(e){
//	var touch = e.touches[0];
	var touch = e.originalEvent.targetTouches[0];
	startY = touch.pageY;
}  
function touchMove(e){
	e.preventDefault();
//	var touch = e.touches[0];
	var touch = e.originalEvent.targetTouches[0];
	endY = touch.pageY;
	diff = endY - startY;
}
function touchEnd(e){
	if(Math.abs(diff) > 150 && canTouch){
		if(diff > 0){
			if(curPage <= 1){
				return;
			}
			
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outDown');
			curPage--;
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inDown');
			
		}else{
			if(curPage >= PageL){
				return;
			}
			
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('outTop');
			curPage++;
			$('.page' + curPage).removeClass('inTop outTop inDown outDown hide').addClass('inTop');
			
		}
		if(curPage >= PageL){
			$('.arrow').hide();
		}else{
			$('.arrow').show();
		}
		
		canTouch = false;
		setTimeout(function(){
			canTouch = true;
			diff = 0;
			$('.page' + (curPage - 1) + ', .page' + (curPage + 1)).addClass('hide');
		},500);
	}
}
 
/
 
//设置可行内滚动
$('#inbox').on('touchstart',function(e){
	e.stopPropagation();
	//document.body.removeEventListener("touchmove", touchMove, false);
	$('.page_box').unbind('touchmove');
});
$('#inbox').on('touchend',function(e){
	$('.page_box').on('touchmove',touchMove);
	//document.body.addEventListener("touchmove", touchMove, false);
});
</script>
</body>
</html>