使用原生js封裝webapp滑動效果(慣性滑動、滑動回彈)

作者：Eve Cole 更新時間：2025-07-01 02:00:02

PC 移動端兼容IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 慣性助動，滑動回彈

門面模式

複製代碼代碼如下:

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() {

//其他功能擴充

}

IE hack css

複製代碼代碼如下:

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;}

HTML代碼

複製代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

logo or animate

</div>

some imformation 2014-4-28

</div>

</div>

</body>

</html>