
帐号登录 邮箱快速注册
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);
}
})
});
};
滑屏效果代码封装:http://menvscode.com/detail/5ace322f4f66b879b92af411
滑屏效果展示