手机端触屏滚动效果
因为现在做的项目在手机上的，而使用 overflow:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style type="text/css"> html,body,h1,h2,h3,h4,p{ margin:0; padding:0; } a{ text-decoration: none } .btn { border-radius: 10px; display: block; font-size:16px; text-align: center; color:#fff; width: 120px; height: 40px; line-height: 40px; background-color: #44B549; } .btn:active{ background-color: #2f9833; } .alert-mask { position: fixed; left: 0; top: 0; z-index: 99; width: 100%; height: 100%; background-color: rgba(0,0,0,.65); display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; } .alert-box { width: 6.133333rem; height: auto; padding: .533333rem .533333rem .4rem; background-color: #fff; border-radius: .133333rem; } .alert-title { width: 100%; line-height: 1; color: #000; font-weight: 700; text-align: center; margin-bottom: .8rem; font-size: 15px; } .alert-body { margin-bottom: .666667rem; } #parent{ height: 5rem; overflow: hidden; } #clauseBox { text-align: left; font-size: .375rem; position: relative; top: 0; left: 0; } </style> </head> <body> <div class="alert-mask" id="dialog1479978164631"><div class="alert-box animated fadeInUp"><div class="alert-title">服务条款</div><div class="alert-body"> <div id="parent"> <div id="clauseBox" class="clauseBox" style="top:0px;"> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> <p>撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人撒旦哈萨克的哈萨克觉得哈萨克觉得很我们是好人好人</p> </div> </div> </div> <div class="alert-bottom"><div class="alert-btn alert-cancel">返回</div><div class="alert-btn alert-sure">确定</div></div></div></div> <script src="test.js"></script> <script type="text/javascript"> var s = new TouchScroll({ID:'clauseBox',timer:300,frd:'parent'}) </script> </html>
js:
function TouchScroll(obj){ this.frd = document.getElementById(obj.frd), this.ID = document.getElementById(obj.ID), this.timer = obj.timer, this.lastY = 0, this.startY = 0, this.height = 0, this.sTop = 0, this.scrollHeight = this.ID.clientHeight - this.frd.clientHeight, this.frdHeight = this.frd.clientHeight, this.conHeight = this.ID.clientHeight, this.lastMoveTime = 0,//一下是缓动参数 this.lastMoveStart = 0, stopInertiaMove = false;//停止缓动滚动 this.init(); } TouchScroll.prototype={ init: function(){ var that = this; that.ID.addEventListener('touchstart', function(e){ that.start(e); }); that.ID.addEventListener('touchmove', function(e){ that.move(e); }); that.ID.addEventListener('touchend', function(e){ that.end(e); }); }, start: function(e){ var that = this; document.addEventListener('touchmove',function(ev){ ev.preventDefault(); }); that.lastY = that.startY = e.targetTouches[0].pageY; //下面是缓动 that.lastMoveStart = that.lastY; that.lastMoveTime = Date.now(); that.stopInertiaMove = true; }, move: function(e){ var that = this; var nowY = e.targetTouches[0].pageY; var changeY = nowY - that.lastY; that.sTop = parseInt(that.ID.style.top) + changeY if (that.sTop >= 0) {that.sTop = 0}else if(Math.abs(that.sTop) > that.scrollHeight){ console.log(-(that.scrollHeight)); that.sTop = -(that.scrollHeight); }; that.ID.style.top = that.sTop + "px"; //console.log(this.frd.style.top); that.lastY = nowY; //下面是缓动 var nowTime = Date.now(); that.stopInertiaMove = true; if(nowTime - that.lastMoveTime >300){ that.lastMoveTime = nowTime; that.lastMoveStart = that.lastY; } }, end: function(e){ var that = this; document.removeEventListener('touchmove',function(ev){ ev.preventDefault(); }); var nowY = e.changedTouches[0].pageY;//touchend事件不存在targetTouches和touches var changeY = nowY - this.lastY; var contentY = parseInt(this.ID.style.top) + changeY; this.ID.style.top = contentY + "px"; this.lastY = nowY; //下面缓动 var nowTime = Date.now(); var v = (nowY - that.lastMoveStart)/(nowTime - that.lastMoveTime);//最后一划平均速度 console.log(v) that.stopInertiaMove = false; (function(v,startTime,contentY){ var updown = v>0?-1 :1;//加速度方向正数向上，负数向下 var everyidle = updown*0.0006;//每次消耗时间 var tozerotime = v/everyidle;//速度到0需要多少时间（多少次） var distance = v * tozerotime / 2;//移动距离（缓动变慢至0距离减半） function inertiaMove(){ if (that.stopInertiaMove) {return}; var theTime = Date.now(); var t = theTime - startTime;//缓动时间差 var nowV = v + t*everyidle; console.log(t+'时间') console.log(updown+'方向'); console.log(nowV+'变化后距离'); console.log(everyidle+'每次消耗'); console.log(updown*nowV+'判断结束') // 速度方向变化表示速度达到0了 if (updown*nowV > 0) { console.log('速度到0结束') return; } var moveY = (v + nowV)/2 * t;//每次在时间内的平均速度乘以时间得到移动距离 that.ID.style.top = (contentY + moveY) + "px"; console.log(contentY + moveY); setTimeout(inertiaMove, 10); } inertiaMove(); })(v,nowTime,contentY)//nowTime是触发end的时间作为缓动开始时间 } } window.TouchScroll = TouchScroll;
