源生js慣性滾動與回彈效果

時間  2019-11-08
標籤 慣性 滾動 回彈 效果 欄目 JavaScript 简体版
原文   原文鏈接

在寫移動端的APP或者頁面時，常常會遇到慣性滾動與回彈效果。用插件iscroll能夠輕鬆解決這個問題，大多數的移動框架也能輕鬆解決這個問題，它們內部都封裝了這個效果。html

一直好奇這個效果原生JS是怎麼實現的，裏面涉及到的彈力公式以及慣性效果還有一大堆臨界點的判斷，非常考驗人。web

在網上找了一下，看到有大神的一篇相關的筆記，因此複製過來，仔細研究。算法

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程