關於移動端彈層下的body滾動

關於移動端彈層下的body滾動

這個問題在移動端挺常見的，網上也有一些解決方法，如今筆者來總結一下：css的解決方案都有兼容問題，js是比較穩定的解決方法(雖然比較麻煩)

ps: 本文的例子都是用vue寫的

關於css的解決方案

1. overflow:hidden;

這是最多人開始想到的解決方法，雖然在pc端能夠解決問題，但在移動端是不行的，
但有人說在html,body同時設置overflow:hidden能夠，但經測試，效果不啥的。。。
在安卓上勉強還行，但會有一卡一卡的效果，ios上直接不行。用手機查看例子.

// vue
watch:{
    showMark:function(val){
        if(val){
            document.body.style.overflow = 'hidden';
            document.documentElement.style.overflow = 'hidden';
        }else{
            document.body.style.overflow = 'auto';
            document.documentElement.style.overflow = 'auto';
        }
    }
}

2.position:fixed

這個方法比上一個方法好多了，經測試，安卓上運行良好，ios上的微信瀏覽器也能夠
但設置body爲fixed定位的同時，滾動的位置爲跳回頂部。貌似能夠用這個？
嗯，若是你不介意頁面彈回頂部的話，但我想在複雜的頁面上估計會有小問題,特別在body上用到transform的時候，fixed會有奇怪的bug。用手機查看例子

// vue
watch:{
    showMark:function(val){
        if(val){
            document.body.style.position = 'fixed';
        }else{
            document.body.style.overflow = 'static';
        }
    }
}

3. pointer-events: none;

嗯，別用這個，試過在彈層上使用這個樣式，無效，在body上才行，但會把touch事件都去掉。。。
用手機查看例子

關於js的解決方案

當彈層的元素不須要滾動的狀況

嗯，這種狀況就好辦，直接阻止在彈層上touchmove事件。用手機查看例子

// vue下，直接加一個@touchmove.prevent

// 用原生js,則統一給一個class元素添加touchmove事件，並阻止默認行爲
// 這裏使用了jquery
$('.stop-scroll').on('touchmove',function(e){
    e.preventDefault();
})

當彈層的元素須要滾動的狀況

嗯，這種狀況就複雜了，須要本身模擬一個滾動的效果，你能夠本身找一個合適的插件，或者參考一下筆者的插件touchScroll.js，又或者你本身動手寫一個適合項目的插件。用手機查看例子

// touchScroll.js初始化(vue)
mounted(){
    this.touchScroll = new TouchScroll({
        target: this.$refs.content, //模擬滾動的對象
        des:'y',//x,y
        noScrolls: [this.$refs.mark] //不須要滾動的對象列表
    });

},
watch:{
    showPupop(val){
        if(val){
            // 打開彈層獲取高度
            this.touchScroll.start();
        }else{
            // 關閉彈窗重置
            this.touchScroll.reset();
        }
    }
}