关于移动端弹层下的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();
        }
    }
}