摘要：而之所以彈出后繼續(xù)滑動手指始終不松開，仍能看到頁面在滾動，這是因為這是瀏覽器的默認(rèn)行為，并且過程的發(fā)生時刻早于，所以在隊列中沒法阻塞它。

上一篇為了解釋移動端web的事件和點(diǎn)擊穿透問題，我做了一個彈出框做例子，見demo?，F(xiàn)在請把關(guān)注點(diǎn)轉(zhuǎn)移到彈出層本身上來，我使用fix定位將它定在屏幕中間，滾動屏幕時發(fā)現(xiàn)問題沒有，底層元素還是在滾動，只是彈出層在屏幕正中間而且周圍有遮罩。所以我們就“滾動”這件事詳細(xì)說說，可能存在哪些滾動需求。

在PC上網(wǎng)頁滾動主要靠鼠標(biāo)滾輪，其次按“上”“下”鍵也能滾動頁面，還可以按“空格”“Page Down/Up”以及“HOME”鍵，或者直接點(diǎn)擊或拖動滾動條也能滾動頁面。那么我們來做個實驗，看這些事件的發(fā)生順序是怎樣的。

document.addEventListener("scroll", function(){
    alert("document scroll");
});

window.addEventListener("scroll", function(){
    alert("window scroll");
});

window.addEventListener("mousewheel", function(){
    alert("window mousewheel");
});

window.addEventListener("keydown", function(e){
    if(37 <= e.keyCode && e.keyCode <= 40 || e.keyCode == 32){
        alert("keydown " + e.keyCode);
    }
});

可以得知，當(dāng)通過鼠標(biāo)滾輪時，mousewheel事件會先觸發(fā)，然后才是scroll。而事件的listener默認(rèn)是遵循冒泡的，所以綁在document上的函數(shù)會先觸發(fā)，然后才是window上的。同理，當(dāng)通過按特定的鍵去滾動頁面時，keydown事件會先觸發(fā)，然后也是scroll。

PC上沒啥問題，那來看看手機(jī)端的表現(xiàn)。

document.addEventListener("scroll", function(){
    alert("document scroll");
});

document.addEventListener("touchstart", function(){
    alert("document touchstart");
});

document.addEventListener("touchmove", function(){
    alert("document touchmove");
});

document.addEventListener("touchend", function(){
    alert("document touchend");
});

按照PC上類似的邏輯，以及前一篇文章中提到的touch事件原理，我們很容易猜出alert順序是：touchstart -> touchmove -> scroll -> touchend 但這是事件發(fā)生的順序，并不是alert結(jié)果的順序?？梢話叨S碼看看，這個alert很詭異的。

當(dāng)慢慢滑時，只會 alert touchstart，然后就沒有了。而快速滑時，alert touchstart 然后 alert scroll。這是因為alert框會阻塞事件響應(yīng)，當(dāng)touchstart后還沒來的及滑動就已經(jīng)彈出alert了，整個事件線程就被中斷了，所以就不會響應(yīng)scroll了。而當(dāng)彈出alert后繼續(xù)滑動（從開始到現(xiàn)在手指始終不松開），然后再松開手指，我們會發(fā)現(xiàn) alert touchstart 后又 alert scroll。為什么alert又沒中斷事件線程呢？

我們知道PC上的alert框是會中斷整個頁面的，即除非你先點(diǎn)“確定”，否則頁面上的任何操作都是無效的，即整個用戶界面被“卡住”了。而在手機(jī)上，由于觸摸事件的連貫性，我猜測是這樣的。當(dāng)手機(jī)上彈出alert時是阻塞其他事件的，但由于手指始終沒松開，所以整個觸摸過程還在繼續(xù)。一邊是alert的阻塞性，一邊是前一輪的觸摸過程還未結(jié)束，由于js單線程的特性，所有事件在用戶界面上的響應(yīng)都是要進(jìn)入隊列處理的，然后才會在界面上體現(xiàn)出來。因為觸摸過程是先發(fā)生的，它仍未結(jié)束，而alert是后發(fā)生的，所以alert并不能阻塞當(dāng)前還未結(jié)束的觸摸過程。因此只要不松開手指，繼續(xù)滑動，最后再松開手指，alert touchstart 后還會 alert scroll。

那么還有個問題，為什么不會 alert touchmove 和 alert touchend 呢？我們繼續(xù)做實驗，依次把 touchstart 和 touchmove 的 alert 語句注釋掉，看看表現(xiàn)結(jié)果。

document.addEventListener("touchstart", function(){
    // alert("document touchstart");
});

document.addEventListener("touchmove", function(){
    alert("document touchmove");
});

document.addEventListener("touchend", function(){
    alert("document touchend");
});

去掉 alert touchstart 后發(fā)現(xiàn)只彈出 alert touchmove，我猜測是因為 touchstart / touchmove / touchend 都是在同一輪觸摸過程中的，由于alert的阻塞性，前面解釋了它允許先發(fā)生的觸摸（還未松開的手指）繼續(xù)touch，但是 alert 會阻塞同一輪觸摸過程的其他事件的響應(yīng)函數(shù)。而之所以alert彈出后繼續(xù)滑動手指（始終不松開），仍能看到頁面在滾動，這是因為這是瀏覽器的默認(rèn)行為，并且touch過程的發(fā)生時刻早于alert，所以在隊列中alert沒法阻塞它。

以上只是我的猜測，有誰知道具體細(xì)節(jié)的請告訴我~ 手指不松開時，這個alert框的底層滾動問題正好也迎合了本文一開始說的彈出框demo，如果有需求說彈出框出現(xiàn)時必須讓外部不能滾動，該怎么辦？

我們經(jīng)常會寫overflow: hidden這樣的css去讓固定尺寸的元素寫死，這樣就算它的子元素超出了父容器的尺寸范圍，也不會“溢出來”。借這個道理，我們可以在root元素上寫死，這樣body里面就不會溢出屏幕了，就不會出現(xiàn)滾動條了。

html, body{
    overflow: hidden;
}

但隨之又出現(xiàn)了另一個問題，如果頁面原來是有滾動條的，在windows下的瀏覽器中滾動條是會占據(jù)一定寬度的（chrome下是17px，firefox下可能是13px），會讓整個viewport的寬度減小一段，看起就像頁面里的所有元素整體往左偏移一小段。而mac下瀏覽器的滾動條是懸浮在上面的，所以不會占據(jù)頁面上的空間。

這樣的話，windows就哭了。假設(shè)頁面原本就是有滾動條的，當(dāng)我們打開彈出框時，為了禁止?jié)L動，root元素被加上overflow: hidden，滾動條消失，底層所有元素就向右偏移一小段。關(guān)閉彈出框時，要讓頁面恢復(fù)滾動，root元素改成overflow: auto，滾動條又出現(xiàn)了，底層所有元素又向左偏移一小段。整個體驗很糟糕！

辦法就是在overflow: hidden的同時通過padding-right把滾動條的空間預(yù)留出來。那么如何知道不同瀏覽器中滾動條到底占多寬呢？通常類似判斷當(dāng)前瀏覽器是否支持某個css屬性或者某些取值，這種跟瀏覽器環(huán)境相關(guān)的問題，辦法就是試探。用js動態(tài)生成一個元素，把你想測試的屬性或值賦在這個元素上，然后把元素append到document中去，最后再通過js去取相應(yīng)的值，看它到底表現(xiàn)出來是啥。

參考這篇文章，可以知道

滾動條寬度 = 元素的offsetWidth - 元素border占據(jù)的2倍寬 - 元素的clientWidth

上面公式的前提是，元素具備y軸滾動條。還有種類似辦法是

滾動條寬度 = 不帶滾動條的元素的clientWidth - 為該元素加上y軸滾動條后的clientWidth

var getScrollbarWidth = function(){
    if(typeof getScrollbarWidth.value === "undefined"){
        var $test = $("
");
        $test.css({
            width: "100px",
            height: "1px",
            "overflow-y": "scroll"
        });

        $("body").append($test);
        getScrollbarWidth.value = $test[0].offsetWidth - $test[0].clientWidth;
        $test.remove();
    }
    return getScrollbarWidth.value;
};

這是根據(jù)第一種計算方式寫出的方法，有了這個再配合overflow就能實現(xiàn)頁面滾動的禁用與恢復(fù)了。詳細(xì)代碼見demo

var disableScroll = function(){
    // body上禁用
    $("body, html").css({
        "overflow": "hidden",
        "padding-right": getScrollbarWidth() + "px"
    });
};

var enableScroll = function(){
    $("body, html").css({
        "overflow": "auto",
        "padding-right": "0"
    });
};

我們看看表現(xiàn)結(jié)果：PC上很OK，簡單有效；手機(jī)上完全沒卵用?。ㄎ沂前沧繖C(jī)，注意是真機(jī)上無效，而非chrome手機(jī)模擬器）

根據(jù)上面頁面滾動原理我們做的實驗，很明顯可以把滾動涉及到的事件干掉，這樣當(dāng)然不會滾動了。

// 記錄原來的事件函數(shù)，以便恢復(fù)
var oldonwheel, oldonmousewheel, oldonkeydown, oldontouchmove;
var isDisabled;

var disableScroll = function(){
    oldonwheel = window.onwheel;
    window.onwheel = preventDefault;

    oldonmousewheel = window.onmousewheel;
    window.onmousewheel = preventDefault;

    oldonkeydown = document.onkeydown;
    document.onkeydown = preventDefaultForScrollKeys;

    oldontouchmove = window.ontouchmove;
    window.ontouchmove = preventDefault;

    isDisabled = true;
};

var enableScroll = function(){
    if(!isDisabled){
        return;
    }

    window.onwheel = oldonwheel;
    window.onmousewheel = oldonmousewheel;
    document.onkeydown = oldonkeydown;

    window.ontouchmove = oldontouchmove;
    isDisabled = false;
};

這里要注意的是，不同瀏覽器上事件到底在window還是document上，PC上會有一些瀏覽器兼容處理。詳細(xì)代碼見demo

同樣看看表現(xiàn)結(jié)果：PC上很粗暴的解決了；手機(jī)上也OK

至此我們看到，使用overflow能夠解決PC上的滾動禁用問題，而禁用與滾動相關(guān)的事件能夠徹底解決PC和手機(jī)的問題。那么有彈出層的話，就應(yīng)該禁用整個頁面的滾動嗎，如果彈出層內(nèi)部需要滾動怎么辦？即我們有可能面臨這樣的需求：彈出框的內(nèi)部是可以滾動的，而彈出層外部和底層元素是不能滾動的。

前面說到給root元素寫上overflow: hidden就可以禁用滾動，那么我們對彈出層這個容器重新寫個overflow: scroll就可以了。

#popupLayer{
    overflow: scroll;
}

PC上簡單有效，但是同樣手機(jī)上不鳥這些。見demo

我們把document上的mousewheel事件禁用了，即給它綁上了一個事件函數(shù)，只不過事件函數(shù)里將事件發(fā)生后的瀏覽器默認(rèn)行為阻止了。

function preventDefault(e) {
    e = e || window.event;
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
}

var disableScroll = function(){
    $(document).on("mousewheel", preventDefault);
    $(document).on("touchmove", preventDefault);
};

于是思路就來了，我們知道瀏覽器里的事件是遵循冒泡機(jī)制的（準(zhǔn)確來說是先從root節(jié)點(diǎn)由外向內(nèi)“捕獲”，然后到達(dá)目標(biāo)元素后，事件再由內(nèi)向外逐層冒泡，關(guān)于這個機(jī)制請看這篇文章的第一部分，這不是本文的重點(diǎn)）。所以我們就可以為彈出層的元素再綁個同樣的事件，阻止事件冒泡到document上，這樣就不會調(diào)用到e.preventDefault()就不會阻止瀏覽器默認(rèn)的滾動行為了。

function preventDefault(e) {
    e = e || window.event;
    e.preventDefault && e.preventDefault();
    e.returnValue = false;
}

// 內(nèi)部可滾
$("#popupLayer").on("mousewheel", stopPropagation);
$("#popupLayer").on("touchmove", stopPropagation);

來看下demo，手機(jī)上請看

背景層是不能滾動的，而彈出層妥妥的可以滾動了！但是發(fā)現(xiàn)問題了不，彈出層內(nèi)部滾動到底部再繼續(xù)滾時，會將背景底層的元素一起滾下去了，這尼瑪FUCK

解決問題的思路很清晰，就是判斷滾動邊界，當(dāng)滾動到達(dá)bottom和top時，就阻止?jié)L動就好啦。

function innerScroll(e){
    // 阻止冒泡到document
    // document上已經(jīng)preventDefault
    stopPropagation(e);

    var delta = e.wheelDelta || e.detail || 0;
    var box = $(this).get(0);

    if($(box).height() + box.scrollTop >= box.scrollHeight){
        if(delta < 0) {
            preventDefault(e);
            return false;
        }
    }
    if(box.scrollTop === 0){
        if(delta > 0) {
            preventDefault(e);
            return false;
        }
    }
    // 會阻止原生滾動
    // return false;
}

$("#popupLayer").on("mousewheel", innerScroll);

代碼很簡單，關(guān)于scrollTop scrollHeight等解釋請看這篇文章。這里唯一要注意的是對鼠標(biāo)滾動值wheelDelta的獲取可能要做兼容性處理，實在有問題的話可以使用jquery-mousewheel去獲取鼠標(biāo)的滾動量。

上面這段代碼是PC上的判斷滾動邊界的處理，那手機(jī)上又該怎么做的，手機(jī)上沒有鼠標(biāo)，如何獲取到滾動量delta？

我想起“局部滾動”界的大佬——IScroll，可以去看下源碼，細(xì)節(jié)很復(fù)雜但是大體結(jié)構(gòu)是很清晰的。

_start: function (e) {
    
    this.startX    = this.x;
    this.startY    = this.y;
    this.absStartX = this.x;
    this.absStartY = this.y;
    this.pointX    = point.pageX;
    this.pointY    = point.pageY;

    this._execEvent("beforeScrollStart");
},

_move: function (e) {
    
    var point        = e.touches ? e.touches[0] : e,
        deltaX        = point.pageX - this.pointX,
        deltaY        = point.pageY - this.pointY;

    this.pointX        = point.pageX;
    this.pointY        = point.pageY;

},

這是iscroll中的一小段代碼，這就是獲取touchmove滾動量的辦法。于是我們就能寫出類似上面innerScroll適用于手機(jī)上的判斷滾動邊界的辦法了。

// 移動端touch重寫
var startX, startY;

$("#popupLayer").on("touchstart", function(e){
    startX = e.changedTouches[0].pageX;
    startY = e.changedTouches[0].pageY;
});

// 仿innerScroll方法
$("#popupLayer").on("touchmove", function(e){
    e.stopPropagation();

    var deltaX = e.changedTouches[0].pageX - startX;
    var deltaY = e.changedTouches[0].pageY - startY;

    // 只能縱向滾
    if(Math.abs(deltaY) < Math.abs(deltaX)){
        e.preventDefault();
        return false;
    }

    var box = $(this).get(0);

    if($(box).height() + box.scrollTop >= box.scrollHeight){
        if(deltaY < 0) {
            e.preventDefault();
            return false;
        }
    }
    if(box.scrollTop === 0){
        if(deltaY > 0) {
            e.preventDefault();
            return false;
        }
    }
    // 會阻止原生滾動
    // return false;
});

這里要注意的是，我加了一條判斷，彈出層內(nèi)部的滾動只能縱向滾，即 deltaY 要大于 deltaX。因為我發(fā)現(xiàn)個bug，當(dāng)沒有這條判斷時，彈出層內(nèi)部可以橫向滾，滾出的都是空白，大家可以自己試下。還有這里到底使用e.changedTouches[0]還是像iscroll里的e.touches[0]獲取當(dāng)前滾動的手指，其實都OK，可以看下這篇文章

最后請看demo，手機(jī)請掃二維碼，效果棒棒的！

【更新】注：一年前做這個demo時，我手機(jī) ( Meizu Android 4.4.2 ) 上效果是OK的，在 SegmentFault 論壇上不止一個人回復(fù)說上面的方案有問題，有一半機(jī)率是不行的，快速滑的時候肯定不行。

網(wǎng)友 jiehwa 的提到不需要重寫事件那么麻煩，通過幾個 css屬性 控制即可。

彈出層父元素設(shè)置屬性 overflow-y: scroll

彈窗彈出時，用js控制底層元素的 position 屬性置為 fixed

彈窗關(guān)閉時，用js控制底層元素的 position 屬性置為 static

在 iOS 端，為了彈窗里面的滾動效果看起來順滑，需要設(shè)置彈窗層的包裹元素屬性：-webkit-overflow-scrolling: touch

css方案的demo（感謝 SegmentFault 網(wǎng)友）

可以看到有瑕疵，當(dāng)強(qiáng)行將底層元素置為 fixed 后，由于 fixed 定位會讓元素脫離正常的DOM文檔流，所以原本位于頁面底部的元素就一下子頂上來了。還有當(dāng)?shù)讓釉鼗瑒右欢尉嚯x后再打開彈出層，底層元素又被 fixed 定位重置了，看著也很別扭。

仔細(xì)閱讀后發(fā)現(xiàn)我誤解了，控制底層元素的 fixed 定位應(yīng)該作用在 的一級子元素，而彈出層的包裹元素也是 的一級子元素，于是 改進(jìn)后的 demo 如下

現(xiàn)在“頁面底部”這幾個字不會頂上來了，但是滑動一段距離后再打開彈出層時的頁面底層還是會抖動，這個暫時也想不出很好的解決方案

最后感謝葉小釵，最近一直在看他關(guān)于移動端事件原理的博客，有點(diǎn)學(xué)會了他那種 代碼實驗 -> 猜測解釋 -> 驗證原理 -> 改進(jìn)問題 這樣的學(xué)習(xí)方法。本文也花了很大力氣寫代碼實驗，疏漏之處望多多指正，謝謝耐心的看完

知乎上的一個討論

本文最早發(fā)表在我的個人博客上，轉(zhuǎn)載請保留出處 http://jsorz.cn/blog/2015/10/popup-scroll-tricks.html