操作: 框内上下拖动...
html 代码
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="Keywords" content="" />
- <meta name="Description" content="" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
- <meta name="apple-mobile-web-app-capable" content="yes" />
- <meta content="telephone=no" name="format-detection" />
- <meta content="email=no" name="format-detection" />
- <title>Document</title>
- <style>
- body{margin:0;padding:0;}
- div{position:relative;width:200px;height:300px;margin:3em auto;border:1px solid #CCC;overflow:hidden;-webkit-user-select:none;user-select:none;}
- ol{width:100%;}
- ol>li{height:30px;}
- </style>
- </head>
- <body>
- <div>
- <ol>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ol>
- </div>
- <script>
- /**
- * 滚动函数
- * @param ctx {DOM} 滚动对象
- * @param isTouch {Boolean} 触屏设备
- */
- function myScroll(ctx,isTouch){
- var ol=ctx.firstElementChild||ctx.firstChild,
- offset=50,
- cur=0,
- isDown=false,
- vy=0,
- fl=150,
- isInTransition=false,
- down=function(e){
- if(isInTransition)return;
- clearTimeout(this._timer);
- var cy=isTouch?e.touches[0].clientY:e.clientY;
- vy=0;
- this._oy=cy-cur;
- this._cy=this._dy=cy;
- this._oh=this.scrollHeight;
- this._ch=this.clientHeight;
- this._startTime=e.timeStamp;
- isDown=true;
- },
- move=function(e){
- if(isDown)
- {
- var cy=isTouch?e.touches[0].clientY:e.clientY;
- if(e.timeStamp-this._startTime>40)
- {
- this._startTime=e.timeStamp;
- cur=cy-this._oy;
- if(cur>0)
- {
- cur*=fl/(fl+cur);
- }
- else if(cur<this._ch-this._oh)
- {
- cur+=this._oh-this._ch;
- cur=cur*fl/(fl-cur)-this._oh+this._ch;
- }
- setPos(cur);
- }
- vy=cy-this._cy;
- this._cy=cy;
- }
- },
- mleave=function(e){
- if(isDown)
- {
- isDown=false;
- var t=this,friction=((vy>>31)*2+1)*0.5,oh=this.scrollHeight-this.clientHeight,cy=isTouch?e.changedTouches[0].clientY:e.clientY;;
- if(cy===this._dy)return;
- this._timer=setInterval(function(){
- vy-=friction;
- cur+=vy;
- setPos(cur);
- if(-cur-oh>offset)
- {
- clearTimeout(t._timer);
- ease(-oh);
- return;
- }
- if(cur>offset)
- {
- clearTimeout(t._timer);
- ease(0);
- return;
- }
- if(Math.abs(vy)<1)
- {
- clearTimeout(t._timer);
- if(cur>0)
- {
- ease(0);
- return;
- }
- if(-cur>oh)
- {
- ease(-oh);
- return;
- }
- }
- },20);
- }
- },
- setPos=function(y){
- ol.style.transform="translateY("+y+"px) translateZ(0)";
- },
- ease=function(target){
- isInTransition=true;
- ctx._timer=setInterval(function(){
- cur-=(cur-target)*0.2;
- if(Math.abs(cur-target)<1)
- {
- cur=target;
- clearInterval(ctx._timer);
- isInTransition=false;
- }
- setPos(cur);
- },20);
- };
- if(isTouch)
- {
- ctx.addEventListener("touchstart",down,false);
- ctx.addEventListener("touchmove",move,false);
- ctx.addEventListener("touchend",mleave,false);
- ctx.addEventListener("touchcancel",mleave,false);
- }
- else
- {
- ctx.addEventListener("mousedown",down,false);
- ctx.addEventListener("mousemove",move,false);
- ctx.addEventListener("mouseleave",mleave,false);
- ctx.addEventListener("mouseup",mleave,false);
- }
- }
- var isTouch=typeof document.body.ontouchstart!=="undefined"; // 触屏设备
- myScroll(document.querySelector("div"),isTouch);
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/11445/1c01d48d95bd705292842a8d7e7e0a2b.html