modal 彈出層後禁止底層滾動

看到一篇不錯的介紹由彈出層引發對滾動原理的討論

親自實驗的時候各種坑，都知道在web上處理很簡單：

html, body{
    overflow: hidden;
    height: 100%;
}

1.這樣只能解決web上的問題，移動端不管用
2.這樣處理仍然會有一些頁面寬度適配問題

---

因爲我用在微信公衆號開發上（移動端），所以找移動端解決方案，
大部分回答是在彈出層彈出的時候禁用掉觸摸事件，彈出層消失的時候再把事件加上：

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

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

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;
};

對於modal中不用滾動的頁面來說的確可以解決問題，但是如果modal中內容也需要滾動，就不行了

---

最終解決方案：

彈出層父元素設置屬性爲overflow-y:scroll;
彈窗彈出時，用js控制讓底層元素的position屬性設置爲fixed;
彈窗關閉時候，用js控制底層元素的position屬性爲正常；
在iOS端，爲了彈窗裏面的滾動效果看起來順滑，需要設置彈窗層的包裹元素屬性：-webkit-overflow-scrolling : touch; 

其實還是存在一點小問題，就是彈出層消失的時候，底層頁面會自動滾動到頂部，我們可以在彈出層彈出的時候記錄一下當前位置，然後在彈出層消失的時候js控制滾動到之前的位置