摘要：腦洞爆炸的背景最近開發項目動效開發越來越多部分動效需要在頁面滑動的時候執行一定的效果但是發現在移動端很多時候頁面滑動的速度快的時候，動效呈現的不穩定性越明顯，會不流暢雖然使用的過渡可以從視覺層面解決這個問題，但是并不能根治，于是乎想到了一個

最近開發項目動效開發越來越多 ；
部分動效需要在頁面滑動的時候執行一定的效果；
但是發現在移動端 很多時候頁面滑動的速度快的時候 ， 動效呈現的不穩定性越明顯 ， 會不流暢； 雖然使用css3的過渡可以從視覺層面解決這個問題 ， 但是并不能根治， 于是乎想到了一個方案。。。

h5新增的用于刷幀的api ， 大家可以網上找到很多相關教程 ， 用法及其簡單 ， 跟使用setTimeOut一樣； 此api的初衷本人理解為用于更好的執行動畫 ， 而找到的一句話 “執行渲染下一幀之前的動作”可能更好的幫助你理解這個api；

而之前說的移動端動畫不流暢的原因是因為快速滑動的時候 ， 兩次出發scroll之間的“間距”越來越大，而導致需要根據滑動計算的精度越來越不準 ， 我們當然希望每滑動1px執行一次scroll是最完美的啦～（雖然基本不可能）

于是乎 ， 想到了一個方案?！

可以在window.scroll開始的時候開啟RAF,在window.scroll結束的時候關閉RAF ， 所有需要執行在scroll中的函數搬到RAF中執行就好了

事實上實驗結果是成功的

每次window.scroll的時候在頁面插入一次scroll字樣 ， 每次raf執行的時候插入raf字樣 ， 在保證一段scroll過程中只存在唯一一個RAF ， 輸出如上圖

事實證明 ios微信環境下 ， raf觸發的頻率在快速滑動頁面的時候確實高于scroll；

唯一的一個實現難點在于 scrollend如何監聽

在每一次scroll的時候 ， 開啟一個50ms的定時器 ， 定時器認定為scroll結束 ， 但是每次滑動都創建定時器就亂套了 ， 所以要在創建定時器之前先清除定時器；

捋一下：

第一次scroll， 清除一個不存在的定時器 ， 然后創建定時器 ， 50ms之后執行的就是scroll結束

第二次scroll ， 清除第一次創建的定時器 ， 創建一個定時器 ， 50ms之后執行的就是scroll結束

。。。。

最后一次scroll ， 清除倒數第二次創建的定時器 ， 創建一個定時器 ， 由于沒有下一次scroll了 ， 那么這個定時器就真的是最后一次scroll了

于是通過這樣的方案迂回形成了scrollEnd ， 雖然有50ms的誤差～

然后代碼如下 ：

var rAF = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) { window.setTimeout(callback, 1000 / 60); };

var cancelRAF = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.oCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame ||
clearTimeout;


class BetterScroll {
constructor() {
    let sy = window.scrollY;
    this.onScroll = this.onScroll;
    this.onScrollEnd = this.onScrollEnd;
    this.scrollList = [];
    this.scrollEndList = [];
    this.scrollTimer = null;
    this.nowWsy = sy;
    this.lastY  =  sy;
    this.direction = 0;
    this.rafMark = null;
    this.rafingMark = false;
    this.gap = 0;
    this.bindEvent();
}
onScroll(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollList.push(cb);
}
onScrollEnd(cb) {
    if (typeof cb !== "function") {
        return;
    }
    this.scrollEndList.push(cb);
}
scrollEnd() {
    let winInfo = {
        sy : this.nowWsy,
        gap : Math.abs(this.gap),
        dir : this.direction,
    }
    for (let i = 0, len = this.scrollEndList.length; i < len; i++) {
        try {
            this.scrollEndList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }
}
rafing() {
    this.nowWsy = window.scrollY;
    this.gap = this.nowWsy - this.lastY;
    // 1為向上滑動 -1 為向下滑動
    !!this.gap && (this.direction = (((this.gap >= 0) | 0 ) - 0.5) * 2);
    this.lastY = this.nowWsy;
    let winInfo = {
        sy : this.nowWsy, //當前window的scrollY
        gap : Math.abs(this.gap), //上次到這次滑動的距離
        dir : this.direction,  ／／ 滑動方向
        
    }
    for (let i = 0, len = this.scrollList.length; i < len; i++) {
        try {
            this.scrollList[i](winInfo);
        } catch (error) {
            console.warn(error)
        }
    }

    this.startRaf();
}
startRaf() {
    let _this = this;
    this.rafMark = rAF(function () {
        _this.rafing();
    })
}
bindEvent() {
    let _this = this;
    window.addEventListener("scroll", function () {
        clearTimeout(_this.scrollTimer);

        if (!_this.rafingMark) {
            _this.startRaf();
            _this.rafingMark = true;
        }

        _this.scrollTimer = setTimeout(function () {
            cancelRAF(_this.rafMark);
            _this.scrollEnd();
            _this.rafingMark = false;
        }, 50);

    }, 0)
}
}

let btScroll = new BetterScroll();

export default btScroll;

用法 ：

組建拋出btScroll對象 ， 

提供兩個方法

btScroll.onScroll(callback);  window正在scrolling的函數 ， 回調函數接受參數 winInfo

btScroll.onScrollEnd(callback); window滑動結束的函數 ， 回調函數接受參數 winInfo


winInfo  ：  {
    sy : window的scrollY值,
    gap : 上一次scroll到這一次scroll之間的差值絕對值,
    dir : window的滑動方向 1為瀏覽器滾動條向下滾動 ， -1為瀏覽器滾動條向上滾動,
}

歡迎各位大大交流 ， 有更好的腦洞和哪里寫的不足的地方歡迎留言討論！