利用translate实现移动端滑屏效果（缓冲动画/滚动条）

责编：menVScode 2018-04-11 23:53 阅读(1473)

css代码

body { margin: 0; }
body, html { height: 100%; overflow: hidden; position: relative; }
header { height: 40px; font-size: 20px; color: #fff; text-align: center; background: #000; line-height: 40px; }
footer { position: absolute; left: 0; right: 0; bottom: 0; height: 40px; color: #fff; text-align: center; background: #000; line-height: 40px; }
#wrap { position: absolute; left: 0; right: 0; top: 40px; bottom: 40px; overflow: hidden; }
#list { margin: 0; padding: 0; list-style: none; }
#list li { line-height: 30px; text-indent: 20px; font-size: 16px; border-bottom: 1px solid #000; }

html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,user-scalable=no" />
        <title>MVC前端网(menVScode)_前端博客_前端技术_前端资源下载_学习，成为更好的自己</title>
    </head>
    <body>
        <header id="header">MVC前端网(menVScode)</header>
        <section id="wrap">
	    <ul id="list">	</ul>
        </section>
        <footer id="footer">menVScode.com</footer>
        <script type="text/javascript" src="m.Tween.js"></script>
    </body>
</html>

js代码

function createList(){
	var list = document.querySelector('#list');
	var inner = "";
	for(var i = 0; i < 30; i++){
		inner += "<li>这是第"+i+"个li</li>"
	}	
	list.innerHTML = inner;
}
document.addEventListener('touchstart',function(e){
	e.preventDefault();
})
window.onload = function(){
	createList();
	var wrap = document.querySelector('#wrap');
	var list = document.querySelector('#list');
	var scrollBar = document.createElement("div");
	var startPoint = 0; // 初始化手指按下的坐标 pageY
	var startEl = 0; // 初始化滑动元素的坐标 pageY
	var lastY = 0; // 初始化上次按下的坐标
	var lastTime = 0; // 初始化上次按下的坐标 的时间
	var lastDis = 0; // 手指移动最后抬起的pageY - 上次按下的坐标pageY = 最后一次移动的距离
	var lastTimeDis = 0; // 两者距离的时间差
	var maxTranslate = wrap.clientHeight-list.offsetHeight;
	var scale = wrap.clientHeight/list.offsetHeight;
	list.style.minHeight = '100%';
	scrollBar.style.cssText = "width:6px;height:50px;background:rgba(0,0,0,.5);position:absolute;right:0;top:0;border-radius:3px;opacity:0;transition:.3s opacity;";

	wrap.appendChild(scrollBar);
	css(list,"translateZ",0.01);
	list.addEventListener('touchstart', function(e) {
		maxTranslate = wrap.clientHeight-list.offsetHeight;
		if(maxTranslate>=0){
			scrollBar.style.display = 'none'; 
		}else{
			scrollBar.style.display = 'block'; 
		}
		scale = wrap.clientHeight/list.offsetHeight;
		scrollBar.style.height = scale*wrap.clientHeight+'px';
		clearInterval(list.timer); //按下禁止滚动
		startPoint = e.changedTouches[0].pageY;
		startEl = css(list,"translateY");
		lastY = startEl;
		lastTime = new Date().getTime();
		lastDis = lastTimeDis = 0;
		scrollBar.style.opacity = 1;
	});
	list.addEventListener('touchmove', function(e) {
		var nowTime = new Date().getTime();
		var nowPoint = e.changedTouches[0].pageY;
		var dis = nowPoint - startPoint;
		var translateY = startEl + dis;
		css(list,"translateY",translateY);
		css(scrollBar,"translateY",-translateY*scale);
		lastDis = translateY - lastY;
		//console.log(translateY+'-'+lastY)
		lastY = translateY;
		lastTimeDis = nowTime - lastTime;
		lastTime = nowTime;
	});
	list.addEventListener('touchend',function(e){
		//console.log(lastDis,lastTimeDis)
		var type = "easeOutStrong";
		var speed = Math.round(lastDis / lastTimeDis * 10);
		speed = lastTimeDis <=0 ? 0 : speed;
		var target = Math.round(speed*20+css(list,"translateY"));
		//console.log(speed)
		//console.log(target)
		if(target > 0){
			target = 0
			type = "backOut";
		}else if(target<maxTranslate){
			target = maxTranslate
			type = "backOut";
		}

		MTween({
			el:list,
			target:{translateY:target},
			time:500,
			// time: Math.round(Math.abs(target - css(list,"translateY"))*2),
			type:type,
			callBack:function(){
				scrollBar.style.opacity = 0;
			},
			callIn:function(){
				var translateY = css(list,"translateY");
				css(scrollBar,"translateY",-translateY*scale);
			}
		})
	});
};