手机端浮层弹窗阻止界面滚动

今天遇到了一个手机端浮层弹窗的需求

要实现这个弹窗效果不麻烦，麻烦的是实现了这个效果之后只让浮层里面的内容滑动而不让底下的内容滑动。

我从网上搜到的实现方法，据说也是bootstrap的实现方法：当弹窗的时候将body的overflow样式设置为hidden

$("body").css("overflow","hidden");

你发现浏览器上没有问题了，可如果只到了这一步事情远远没有解决。如果你能够局域网访问，你会发现在手机上浮层底下的内容依然会动。我想到了使用这种方式解决：

1.获取出现浮层时界面滚动的距离和记录浮层状态

var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
var modelToggle=true;

2.使用onscroll监听界面的滚动

window.onscroll=function(){
    if(modelToggle){//判断是否已经打开了浮层
        $("body").css("top",scrollTop);//设置界面滚动的位置一直是浮层打开的位置
    }
}

3.如果这个时候你的界面还是有问题你可以尝试着给你的body的css样式设置一些初始值

body{
    position:fixed;
    top:0;
    overflow:auto;
}

希望能够帮到你。