在寫移動端的APP或者頁面時，經常會遇到慣性滾動與回彈效果。用插件iscroll可以輕鬆解決這個問題，大多數的移動框架也能輕鬆解決這個問題，它們內部都封裝了這個效果。
一直好奇這個效果原生JS是怎麼實現的，裏面涉及到的彈力公式以及慣性效果還有一大堆臨界點的判斷，很是考驗人。
在網上找了一下，看到有大神的一篇相關的筆記，所以複製過來，仔細研究。
<!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>
function myScroll(ctx) {
var ol = ctx.firstElementChild || ctx.firstChild,
offset = 50, //最大溢出值
cur = 0, //列表滑動位置
isDown = false,
vy = 0, //滑動的力度
fl = 150, //彈力,值越大,到度或到頂後,可以繼續拉的越遠
isInTransition = false; //是否在滾動中
ctx.addEventListener("mousedown",
function(e) {
if (isInTransition) return; //如果在滾動中，則中止執行
clearTimeout(this._timer); //清除定時器
vy = 0;
this._oy = e.clientY - cur; //計算鼠標按下位置與列表當前位置的差值,列表位置初始值爲0
this._cy = e.clientY; //鼠標按下的位置
this._oh = this.scrollHeight; //列表的高度
this._ch = this.clientHeight; //容器的高度
this._startTime = e.timeStamp; //鼠標按下時的時間戳
isDown = true; //鼠標是否有按下，主要防止用戶是從容器外開始滑動的
});
ctx.addEventListener("mousemove",
function(e) {
if (isDown) { //如果鼠標是從容器裏開始滑動的
if (e.timeStamp - this._startTime > 40) { //如果是慢速滑動，就不會產生力度，列表是跟着鼠標移動的
this._startTime = e.timeStamp; //慢速滑動不產生力度，所以需要實時更新時間戳
cur =
e.clientY -
this._oy; //列表位置應爲 鼠標當前位置減去鼠標按下時與列表位置的差值,如:列表初始位置爲0,鼠標在 5的位置按,那麼差值爲 5,此處假如鼠標從5滑動到了4,向上滑,cur = 4-5 =-1 ,假如鼠標從5滑動到了6,向下滑,cur= 6 - 5 = 1
if (cur > 0) { //如果列表位置大於0,既鼠標向下滑動併到頂時
cur *= fl / (fl + cur); //列表位置帶入彈力模擬,公式只能死記硬背了,公式爲:位置 *=彈力/(彈力+位置)
} else if (cur < this._ch - this._oh) { //如果列表位置小於 容器高度減列表高度(因爲需要負數,所以反過來減),既向上滑動到最底部時。
//當列表滑動到最底部時,cur的值其實是等於 容器高度減列表高度的,假設窗口高度爲10,列表爲30,那此時cur爲 10 - 30 = -20,但這裏的判斷是小於,所以當cur<-20時纔會觸發,如 -21;
cur +=
this._oh -
this._ch; //列表位置加等於 列表高度減容器高度(這是與上面不同,這裏是正減,得到了一個正數) ,這裏 cur 爲負數,加上一個正數,延用上面的假設,此時 cur = -21 + (30-10=20) = -1 ,所以這裏算的是溢出數
// console.log(cur);
cur =
cur * fl / (fl - cur) -
this._oh +
this._ch; //然後給溢出數帶入彈力,延用上面的假設,這裏爲 cur = -1 * 150 /(150 - -1 = 151)~= -0.99 再減去 30 等於 -30.99 再加上容器高度 -30.99+10=-20.99 ,這也是公式,要死記。。
}
setPos(cur); //移動列表
}
vy = e.clientY - this._cy; //記錄本次移動後,與前一次鼠標位置的滑動的距離,快速滑動時纔有效,慢速滑動時差值爲 1 或 0,vy可以理解爲滑動的力度
// console.log(vy);
this._cy = e.clientY; //更新前一次位置爲現在的位置,以備下一次比較
}
},
false);
ctx.addEventListener("mouseleave", mleave, false);
ctx.addEventListener("mouseup", mleave, false);
function setPos(y) { //傳們列表y軸位置,移動列表
ol.style.transform = "translateY(" + y + "px) translateZ(0)";
}
function ease(target) {
isInTransition = true;
ctx._timer = setInterval(function() { //回彈算法爲 當前位置 減 目標位置 取2個百分點 遞減
cur -= (cur - target) * 0.2;
if (Math.abs(cur - target) < 1) { //減到 當前位置 與 目標位置相差小於1 之後直接歸位
cur = target;
clearInterval(ctx._timer);
isInTransition = false;
}
setPos(cur);
},
20);
}
function mleave(e) {
if (isDown) {
isDown = false;
console.log(vy);
var t = this,
friction = ((vy >> 31) * 2 + 1) * 0.5, //根據力度套用公式計算出慣性大小,公式要記住
oh = this.scrollHeight - this.clientHeight;
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) { //如果力度減小到小於1了,再做超出回彈
clearTimeout(t._timer);
if (cur > 0) {
ease(0);
return;
}
if (-cur > oh) {
ease(-oh);
return;
}
}
},
20);
}
}
}
myScroll(document.querySelector("div"));
</script>
</body>
</html>
如圖:
