使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)

　　window.onload = function() {

　　/*测试数据*/

　　var insert = '';

　　for (var i = 0; i < 80; i++) {

　　insert += '<div style = "width:100%; text-align:center;">滑动测试 ' + i + '</div>';

　　}

　　document.getElementById("moveArea").innerHTML = insert;

　　/*测试数据   */

　　var at = new appTouch({

　　tContain : 'appArea', //必选：滑动区域id

　　tMove : 'moveArea', //必选：移动区域id

　　tScroller : 'scroller', //必选：自定义滚动条

　　tScrollerArea : 'scrollerArea'//必选：滚动条区域

　　}, onmoveend);

　　//到顶/底回调

　　function onmoveend(m) {

　　//console.log(m);

　　}

　　}

　　/*=====================

　　* 名称: appTouch

　　* 功能: web app滑动模拟组件

　　* 参数: 相关配置

　　======================*/

　　var appTouch = function(config, callback) {

　　this.touchContain = config.tContain;

　　this.touchMove = config.tMove;

　　this.touchScroller = config.tScroller;

　　this.touchScrollerArea = config.tScrollerArea;

　　this.callbackfn = callback;

　　this.move();

　　}

　　appTouch.prototype = {

　　move : function(e) {

　　var monitor = document.getElementById(this.touchContain), //监听容器

　　target = document.getElementById(this.touchMove), //移动目标

　　scroller = document.getElementById(this.touchScroller), //自定义滚动条

　　scrollerArea = document.getElementById(this.touchScrollerArea), //滚动条区域

　　sheight = monitor.offsetHeight / target.offsetHeight * monitor.offsetHeight, //自定义滚动条的长度

　　st = (target.offsetHeight - monitor.offsetHeight) / (monitor.offsetHeight - sheight), //移动块对应滚轮单位长度

　　tslow = 4, //到顶/底减基数

　　tMove = 0, //滑块到顶top值

　　tMoveL = tMove + 140, //到顶允许下拉范围

　　bMove = monitor.offsetHeight - target.offsetHeight, //滑块到底top值

　　bMoveL = bMove - 140, //到底允许上滑范围

　　callbackfn = this.callbackfn, //回调函数

　　flg = false, //标记是否滑动

　　startY, //标记起始位置

　　startTop, //标记滑动起始时的高度值

　　move = 0;

　　//移动距离

　　//鼠标事件注册

　　addEvent(monitor, 'mousedown', moveStart);

　　addEvent(monitor, 'mousemove', moveIn);

　　addEvent(monitor, 'mouseup', moveEnd);

　　addEvent(window, 'mousemove', moveIn);

　　addEvent(window, 'mouseup', moveEnd);

　　//移动设备触摸事件注册

　　addEvent(monitor, 'touchstart', moveStart);

　　addEvent(monitor, 'touchmove', moveIn);

　　addEvent(monitor, 'touchend', moveEnd);

　　/**

　　*外观/门面模式包装

　　*/

　　/*事件监听 */

　　function addEvent(el, type, fn) {

　　if (el.addEventListener) {

　　el.addEventListener(type, fn, false);

　　} else if (el.attachEvent) {

　　el.attachEvent('on' + type, fn);

　　} else {

　　el['on' + type] = fn;

　　}

　　}

　　//取消浏览器默认行为

　　function stop(e) {

　　//Opera/Chrome/FF

　　if (e.preventDefault)

　　e.preventDefault();

　　//IE

　　e.returnValue = false;

　　}

　　//包装结束

　　/**

　　*操作函数

　　*/

　　//惯性缓动参数

　　var lastMoveTime = 0;

　　var lastMoveStart = 0;

　　var stopInertiaMove = false;

　　/*移动触发*/

　　function moveStart(e) {

　　stop(e);

　　flg = true;

　　if (e.touches)

　　e = e.touches[0];

　　startY = e.clientY;

　　startTop = target.style.top || 0;

　　//惯性缓动

　　lastMoveStart = startY;

　　lastMoveTime = new Date().getTime();

　　stopInertiaMove = true;

　　scrollerArea.style.visibility = 'visible';

　　}

　　/*移动过程中*/

　　function moveIn(e) {

　　if (flg) {

　　stop(e);

　　if (e.touches)

　　e = e.touches[0];

　　move = e.clientY - startY + parseInt(startTop);

　　if (move > tMove) {

　　(move - tMove) / tslow + tMove > tMoveL ? move = tMoveL : move = (move - tMove) / tslow + tMove

　　} else if (move < bMove)

　　(move - bMove) / tslow + bMove < bMoveL ? move = bMoveL : move = (move - bMove) / tslow + bMove;

　　target.style.top = move + 'px';

　　scroller.style.top = -move / st + 'px';

　　//惯性缓动

　　var nowTime = new Date().getTime();

　　stopInertiaMove = true;

　　if (nowTime - lastMoveTime > 300) {

　　lastMoveTime = nowTime;

　　lastMoveStart = e.clientY;

　　}

　　}

　　}

　　/*移动结束*/

　　function moveEnd(e) {

　　stop(e);

　　if (e.touches)

　　e = e.touches[0];

　　//惯性缓动

　　var contentTop = target.style.top.replace('px', '');

　　var contentY = (parseInt(contentTop) + e.clientY - lastMoveStart);

　　var nowTime = new Date().getTime();

　　var v = (e.clientY - lastMoveStart) / (nowTime - lastMoveTime);

　　//最后一段时间手指划动速度

　　stopInertiaMove = false;

　　(function(v, startTime, contentY) {

　　var dir = v > 0 ? -1 : 1;

　　//加速度方向

　　var deceleration = dir * 0.005;

　　function inertiaMove() {

　　if (stopInertiaMove)

　　return;

　　var nowTime = new Date().getTime();

　　var t = nowTime - startTime;

　　var nowV = v + t * deceleration;

　　var moveY = (v + nowV) / 2 * t;

　　// 速度方向变化表示速度达到0了

　　if (dir * nowV > 0) {

　　if (move > tMove) {

　　callbackfn('到顶了');

　　target.style.top = tMove + 'px';

　　scroller.style.top = tMove + 'px';

　　} else if (move < bMove) {

　　callbackfn('到底了');

　　target.style.top = bMove + 'px';

　　scroller.style.top = -bMove / st + 'px';

　　}

　　setTimeout(function() {

　　if (!stopInertiaMove)

　　scrollerArea.style.visibility = 'hidden';

　　}, 4000);

　　return;

　　}

　　move = contentY + moveY;

　　if (move > tMove) {

　　t /= 20;

　　move = (move - tMove) / 10 + tMove;

　　} else if (move < bMove) {

　　t /= 20;

　　move = (move - bMove) / 10 + bMove;

　　}

　　target.style.top = move + "px";

　　scroller.style.top = -move / st + 'px';

　　setTimeout(inertiaMove, 10);

　　}

　　inertiaMove();

　　})(v, nowTime, contentY);

　　move = 0;

　　flg = false;

　　}

　　//操作结束

　　/**

　　*相关初始化

　　*/

　　//滚动条长度初始化

　　scroller.style.height = sheight + 'px';

　　//初始化结束

　　},

　　otherInteract : function() {

　　//其他功能扩充

　　}

　　}

　　body,html {background-color:#333; margin: 0; height: 100%; line-height: 2.0; font-family: 'Microsoft YaHei'; overflow-y:hidden;}

　　#contain{margin: 0 auto; position:relative; width: 100%; max-width: 480px; _width: 480px; height: 100%; cursor: pointer !important;}

　　#appArea{position: absolute; width: 100%; height: 100%; overflow: hidden;  background-color: #fff;}

　　#topInfo{position: absolute;top: 60px;width: 100%; height:60px; text-align: center; font-size: 18px; }

　　#bottomInfo{position: absolute;bottom: 0;width: 100%;}

　　#scrollerArea{position: absolute; right: 0; width: 1.5%; height: 100%;visibility: hidden;}

　　#scroller{position: absolute; top:0; width: 100%;  background-color: #aaa;}

　　#moveArea{position: absolute; top:0px; width: 100%; background-color: #ddd;}

　　<!DOCTYPE html>

　　<html>

　　<head>

　　<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

　　<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

　　<link type="text/css" href="css/main.css" rel="stylesheet">

　　<title>滑动回弹</title>

　　<!--[if lt IE 9]>      <![endif]-->

　　<noscript></noscript>

　　</head>

　　<body>

　　<div id="contain">

　　<div id="appArea">

　　<div id="topInfo">

　　logo or animate

　　</div>

　　<div id="bottomInfo">

　　some imformation  2014-4-28

　　</div>

　　<div id="moveArea"></div>

　　<div id="scrollerArea">

　　<div id="scroller"></div>

　　</div>

　　</div>

　　</div>

　　<script src="js/main.js"></script>

　　</body>

　　</html>