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

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

在PC上網(wǎng)頁滾動(dòng)主要靠鼠標(biāo)滾輪，其次按“上”“下”鍵也能滾動(dòng)頁面，還可以按“空格”“Page Down/Up”以及“HOME”鍵，或者直接點(diǎn)擊或拖動(dòng)滾動(dòng)條也能滾動(dòng)頁面。那么我們來做個(gè)實(shí)驗(yà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)滾輪時(shí)，mousewheel事件會(huì)先觸發(fā)，然后才是scroll。而事件的listener默認(rèn)是遵循冒泡的，所以綁在document上的函數(shù)會(huì)先觸發(fā)，然后才是window上的。同理，當(dāng)通過按特定的鍵去滾動(dòng)頁面時(shí)，keydown事件會(huì)先觸發(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碼看看，這個(gè)alert很詭異的。

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

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

那么還有個(gè)問題，為什么不會(huì) alert touchmove 和 alert touchend 呢？我們繼續(xù)做實(shí)驗(yàn)，依次把 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，我猜測(cè)是因?yàn)?touchstart / touchmove / touchend 都是在同一輪觸摸過程中的，由于alert的阻塞性，前面解釋了它允許先發(fā)生的觸摸（還未松開的手指）繼續(xù)touch，但是 alert 會(huì)阻塞同一輪觸摸過程的其他事件的響應(yīng)函數(shù)。而之所以alert彈出后繼續(xù)滑動(dòng)手指（始終不松開），仍能看到頁面在滾動(dòng)，這是因?yàn)檫@是瀏覽器的默認(rèn)行為，并且touch過程的發(fā)生時(shí)刻早于alert，所以在隊(duì)列中alert沒法阻塞它。

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

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

html, body{
    overflow: hidden;
}

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

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

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

參考這篇文章，可以知道

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

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

滾動(dòng)條寬度 = 不帶滾動(dòng)條的元素的clientWidth - 為該元素加上y軸滾動(dòng)條后的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ù)第一種計(jì)算方式寫出的方法，有了這個(gè)再配合overflow就能實(shí)現(xiàn)頁面滾動(dòng)的禁用與恢復(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，簡(jiǎn)單有效；手機(jī)上完全沒卵用?。ㄎ沂前沧繖C(jī)，注意是真機(jī)上無效，而非chrome手機(jī)模擬器）

根據(jù)上面頁面滾動(dòng)原理我們做的實(shí)驗(yàn)，很明顯可以把滾動(dòng)涉及到的事件干掉，這樣當(dāng)然不會(huì)滾動(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上會(huì)有一些瀏覽器兼容處理。詳細(xì)代碼見demo

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

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

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

#popupLayer{
    overflow: scroll;
}

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

我們把document上的mousewheel事件禁用了，即給它綁上了一個(gè)事件函數(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)于這個(gè)機(jī)制請(qǐng)看這篇文章的第一部分，這不是本文的重點(diǎn)）。所以我們就可以為彈出層的元素再綁個(gè)同樣的事件，阻止事件冒泡到document上，這樣就不會(huì)調(diào)用到e.preventDefault()就不會(huì)阻止瀏覽器默認(rèn)的滾動(dòng)行為了。

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ī)上請(qǐng)看

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

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

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;
        }
    }
    // 會(huì)阻止原生滾動(dòng)
    // return false;
}

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

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

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

我想起“局部滾動(dòng)”界的大佬——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滾動(dòng)量的辦法。于是我們就能寫出類似上面innerScroll適用于手機(jī)上的判斷滾動(dòng)邊界的辦法了。

// 移動(dòng)端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;
        }
    }
    // 會(huì)阻止原生滾動(dòng)
    // return false;
});

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

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

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

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

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

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

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

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

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

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

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

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

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

知乎上的一個(gè)討論

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